#include <iostream>
#include <string>
#include <vector>
#include "histogram.h" 
#include "text.h" 
using namespace std;


void svg_begin(double width, double height) {
    cout << "<?xml version='1.0' encoding='UTF-8'?>\n";
    cout << "<svg ";
    cout << "width='" << width << "' ";
    cout << "height='" << height << "' ";
    cout << "viewBox='0 0 " << width << " " << height << "' ";
    cout << "xmlns='http://www.w3.org/2000/svg'>\n";
}

void svg_text(double left, double baseline, string text) {
    cout << "<text x='" << left << "' y='" << baseline << "'>" << text <<"</text>\n";
}

void svg_rect(double x, double y, double width, double height, string stroke = "red", string fill = "red") {
    cout << "<rect x='" << x << "' y='" << y << "' width='" << width << "' stroke='" << stroke << "' height='" << height << "' fill='" << fill << "' />\n";
}

void svg_end() {
    cout << "</svg>\n";
}

void show_histogram_svg(const vector<double>& marks, const vector<double>& chart) {
    const auto IMAGE_WIDTH = 400;
    const auto IMAGE_HEIGHT = 300;
    const auto TEXT_LEFT = 20;
    const auto TEXT_BASELINE = 20;
    const auto TEXT_WIDTH = 50;
    const auto BIN_HEIGHT = 30;
    const auto BLOCK_WIDTH = 10;
    svg_begin(400, 300);
    double top = 0;
    for (double bin : chart) {
        const double bin_width = BLOCK_WIDTH * bin;
        svg_text(TEXT_LEFT, top + TEXT_BASELINE, to_string((int)bin));
        svg_rect(TEXT_WIDTH, top, bin_width, BIN_HEIGHT);
        top += BIN_HEIGHT;
    }
    svg_end();
}


struct Input {
    vector <double> marks;
    int NCharts = 0;
};

Input input_data() {
    Input in;
    int VecSize = 0;
    cin >> VecSize;
    in.marks.resize(VecSize);
    for (int i = 0; i < VecSize; i++) {
        cin >> in.marks[i];
    }
    cin >> in.NCharts;
    return in;
};

int main()
{
    Input in = input_data();
    vector <double> chart = MakeHistogram(in.marks, in.NCharts);
    //show_histogram_text(in.marks, chart);
    show_histogram_svg(in.marks, chart);
}