Web Inspector: Make WI.ColumnChart a WI.View subclass
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ColumnChart.js
1 /*
2  * Copyright (C) 2019 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 // ColumnChart creates a chart filled with singular columns.
27 //
28 // Initialize the chart with a size. You can then include a new column
29 // in the column chart by providing an (x, y, w, h) via `addColumn`.
30 //
31 // SVG:
32 //
33 // - There is a single rect for each bar.
34 //
35 //  <div class="column-chart">
36 //      <svg viewBox="0 0 800 75">
37 //          <rect width="<w>" height="<h>" transform="translate(<x>, <y>)" />
38 //          <rect width="<w>" height="<h>" transform="translate(<x>, <y>)" />
39 //          ...
40 //      </svg>
41 //  </div>
42
43 WI.ColumnChart = class ColumnChart extends WI.View
44 {
45     constructor(size)
46     {
47         super();
48
49         this.element.classList.add("column-chart");
50
51         this._svgElement = this.element.appendChild(createSVGElement("svg"));
52         this._svgElement.setAttribute("preserveAspectRatio", "none");
53
54         this._columns = [];
55         this.size = size;
56     }
57
58     // Public
59
60     get size()
61     {
62         return this._size;
63     }
64
65     set size(size)
66     {
67         this._size = size;
68
69         this._svgElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
70     }
71
72     addColumn(x, y, width, height)
73     {
74         this._columns.push({x, y, width, height});
75     }
76
77     clear()
78     {
79         this._columns = [];
80     }
81
82     // Protected
83
84     layout()
85     {
86         super.layout();
87
88         if (this.layoutReason === WI.View.LayoutReason.Resize)
89             return;
90
91         this._svgElement.removeChildren();
92
93         for (let {x, y, width, height} of this._columns) {
94             let rect = this._svgElement.appendChild(createSVGElement("rect"));
95             rect.setAttribute("width", width);
96             rect.setAttribute("height", height);
97             rect.setAttribute("transform", `translate(${x}, ${y})`);
98         }
99     }
100 };