+
+
All together in one view in one Cartesian plane
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
All together in one view in independent Cartesian planes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/charts/example.css b/packages/charts/example.css
index 332889a..41dc45c 100644
--- a/packages/charts/example.css
+++ b/packages/charts/example.css
@@ -54,51 +54,38 @@ body.bold {
body {
color: var(--theme-line-color);
}
-table {
- width: 100%;
-}
-table, thead, td {
- border: var(--theme-line-width) solid;
- border-collapse: collapse;
-}
-thead {
- font-weight: bold;
- background-color: var(--theme-area-fill);
-}
div.container {
display: block;
position: absolute;
float: left;
- width: 95%;
+ width: 100%;
height: 300%;
}
div.block {
display: block;
position: relative;
width: 100%;
- height: 12.5%;
+ height: 600px;
}
/* HDML VIEW */
-hdml-view.all-together,
-hdml-view.all-together-independent {
+hdml-view {
width: 100%;
height: calc(100% - 80px);
}
/* HDML PLANE */
-hdml-view.all-together cartesian-plane {
- padding: 15px 25px;
-}
-hdml-view.all-together-independent cartesian-plane {
- padding: 8px 25px 30px 35px;
+hdml-view cartesian-plane {
+ width: 100%;
+ height: 100%;
+ padding: 30px 100px 30px 100px;
}
/* HDML SCALE */
-hdml-view.all-together ordinal-scale {
+hdml-view ordinal-scale {
padding: 0 0 0 40px;
}
-hdml-view.all-together linear-scale {
+hdml-view linear-scale {
--hdml-padding: 15px 0;
--hdml-padding-hover: 25px 0;
--hdml-padding-active: 25px 0;
@@ -106,10 +93,8 @@ hdml-view.all-together linear-scale {
}
/* HDML AXIS */
-hdml-view.all-together horizontal-axis,
-hdml-view.all-together vertical-axis,
-hdml-view.all-together-independent horizontal-axis,
-hdml-view.all-together-independent vertical-axis {
+hdml-view horizontal-axis,
+hdml-view vertical-axis {
--hdml-line-width: var(--theme-line-width);
--hdml-line-width_active: var(--theme-line-width-bold);
--hdml-line-width_focus: var(--theme-line-width-bold);
@@ -133,14 +118,12 @@ vertical-axis.center {
}
/* HDML AXIS GRID */
-hdml-view.all-together horizontal-axis-grid,
-hdml-view.all-together vertical-axis-grid,
-hdml-view.all-together-independent horizontal-axis-grid,
-hdml-view.all-together-independent vertical-axis-grid {
- --hdml-line-width: var(--theme-line-width);
- --hdml-line-width_active: var(--theme-line-width-bold);
- --hdml-line-width_focus: var(--theme-line-width-bold);
- --hdml-line-width_hover: var(--theme-line-width-bold);
+hdml-view horizontal-axis-grid,
+hdml-view vertical-axis-grid {
+ --hdml-line-width: 1px;
+ --hdml-line-width_active: 2px;
+ --hdml-line-width_focus: 2px;
+ --hdml-line-width_hover: 2px;
--hdml-line-color: var(--theme-area-line);
--hdml-line-color_active: var(--theme-area-line-bold);
@@ -148,16 +131,11 @@ hdml-view.all-together-independent vertical-axis-grid {
--hdml-line-color_hover: var(--theme-area-line-bold);
--hdml-line-style: dashed;
- --hdml-line-style_active: solid;
- --hdml-line-style_focus: solid;
- --hdml-line-style_hover: solid;
}
/* HDML AXIS TICK */
-hdml-view.all-together horizontal-axis-tick,
-hdml-view.all-together vertical-axis-tick,
-hdml-view.all-together-independent horizontal-axis-tick,
-hdml-view.all-together-independent vertical-axis-tick {
+hdml-view horizontal-axis-tick,
+hdml-view vertical-axis-tick {
--hdml-tick-style: var(--theme-tick-style);
--hdml-tick-width: var(--theme-tick-width);
--hdml-tick-height: var(--theme-tick-height);
@@ -190,10 +168,8 @@ vertical-axis-tick.center {
}
/* HDML AXIS TICK LABELS */
-hdml-view.all-together horizontal-axis-tick.labels,
-hdml-view.all-together vertical-axis-tick.labels,
-hdml-view.all-together-independent horizontal-axis-tick.labels,
-hdml-view.all-together-independent vertical-axis-tick.labels {
+hdml-view horizontal-axis-tick.labels,
+hdml-view vertical-axis-tick.labels {
--hdml-tick-style: text;
--hdml-font-family: var(--theme-font-family);
@@ -221,22 +197,16 @@ hdml-view.all-together-independent vertical-axis-tick.labels {
--hdml-fill-color_focus: var(--theme-line-color-bold);
--hdml-fill-color_hover: var(--theme-line-color-bold);
}
-hdml-view.all-together horizontal-axis-tick.labels {
- top: calc(50% + 20px);
-}
-hdml-view.all-together vertical-axis-tick.labels {
- left: 25px;
-}
-hdml-view.all-together-independent horizontal-axis-tick.labels {
+hdml-view horizontal-axis-tick.labels {
top: calc(100% + 20px);
}
-hdml-view.all-together-independent vertical-axis-tick.labels {
- left: -25px;
+hdml-view vertical-axis-tick.labels {
+ left: -50px;
}
-hdml-view.all-together-independent horizontal-axis-tick.labels.center {
+hdml-view horizontal-axis-tick.labels.center {
top: calc(50% + 20px);
}
-hdml-view.all-together-independent vertical-axis-tick.labels.center {
+hdml-view vertical-axis-tick.labels.center {
left: calc(50% - 25px);
}
@@ -261,6 +231,103 @@ data-line {
--hdml-line-style_hover: solid;
}
+
+/* Stock colors */
+td.amazon {
+ padding: 5px;
+ color: #fff;
+ background-color: #ff9100;
+}
+data-line.amazon,
+data-point.amazon {
+ --hdml-line-color: #ff9100;
+ --hdml-line-color_active: #ff9100;
+ --hdml-line-color_focus: #ff9100;
+ --hdml-line-color_hover: #ff9100;
+}
+data-point.labels.amazon {
+ --hdml-fill-color: #ff9100;
+ --hdml-fill-color_active: #ff9100;
+ --hdml-fill-color_focus: #ff9100;
+ --hdml-fill-color_hover: #ff9100;
+}
+
+td.apple {
+ padding: 5px;
+ color: #fff;
+ background-color: #737b8b;
+}
+data-line.apple,
+data-point.apple {
+ --hdml-line-color: #737b8b;
+ --hdml-line-color_active: #737b8b;
+ --hdml-line-color_focus: #737b8b;
+ --hdml-line-color_hover: #737b8b;
+}
+data-point.labels.apple {
+ --hdml-fill-color: #737b8b;
+ --hdml-fill-color_active: #737b8b;
+ --hdml-fill-color_focus: #737b8b;
+ --hdml-fill-color_hover: #737b8b;
+}
+
+td.google {
+ padding: 5px;
+ color: #fff;
+ background-color: #56b3f5;
+}
+data-line.google,
+data-point.google {
+ --hdml-line-color: #56b3f5;
+ --hdml-line-color_active: #56b3f5;
+ --hdml-line-color_focus: #56b3f5;
+ --hdml-line-color_hover: #56b3f5;
+}
+data-point.labels.google {
+ --hdml-fill-color: #56b3f5;
+ --hdml-fill-color_active: #56b3f5;
+ --hdml-fill-color_focus: #56b3f5;
+ --hdml-fill-color_hover: #56b3f5;
+}
+
+td.microsoft {
+ padding: 5px;
+ color: #fff;
+ background-color: #1ca335;
+}
+data-line.microsoft,
+data-point.microsoft {
+ --hdml-line-color: #1ca335;
+ --hdml-line-color_active: #1ca335;
+ --hdml-line-color_focus: #1ca335;
+ --hdml-line-color_hover: #1ca335;
+}
+data-point.labels.microsoft {
+ --hdml-fill-color: #1ca335;
+ --hdml-fill-color_active: #1ca335;
+ --hdml-fill-color_focus: #1ca335;
+ --hdml-fill-color_hover: #1ca335;
+}
+
+td.netflix {
+ padding: 5px;
+ color: #fff;
+ background-color: #d7112f;
+}
+data-line.netflix,
+data-point.netflix {
+ --hdml-line-color: #d7112f;
+ --hdml-line-color_active: #d7112f;
+ --hdml-line-color_focus: #d7112f;
+ --hdml-line-color_hover: #d7112f;
+}
+data-point.labels.netflix {
+ --hdml-fill-color: #d7112f;
+ --hdml-fill-color_active: #d7112f;
+ --hdml-fill-color_focus: #d7112f;
+ --hdml-fill-color_hover: #d7112f;
+}
+
/* HDML AREAS */
data-area {
--hdml-curve-type: cardinal;
diff --git a/packages/charts/example.html b/packages/charts/example.html
index 577e231..dbd0bdc 100644
--- a/packages/charts/example.html
+++ b/packages/charts/example.html
@@ -8,115 +8,16 @@
+
+
+
-
All together in one view in one Cartesian plane
-
+
+ Average Stocks Volumes
+
+
+
+ | Amazon |
+ Apple |
+ Google |
+ Microsoft |
+ Netflix |
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
All together in one view in independent Cartesian planes
-
-
+ values='["2000-01", "2000-02", "2000-03"]'>
+
+ max="1000000000">
-
-
+ class="amazon"
+ x='["2000-01", "2000-02", "2000-03"]'
+ y="[0, 0, 0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ class="apple"
+ x='["2000-01", "2000-02", "2000-03"]'
+ y="[0, 0, 0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ class="google"
+ x='["2000-01", "2000-02", "2000-03"]'
+ y="[0, 0, 0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ class="microsoft"
+ x='["2000-01", "2000-02", "2000-03"]'
+ y="[0, 0, 0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ class="netflix"
+ x='["2000-01", "2000-02", "2000-03"]'
+ y="[0, 0, 0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Independent view
-
-
-
-
-
-
-
-
-
-
+
+ class="amazon"
+ x='["2000-01"]'
+ y="[0]">
+ class="apple"
+ x='["2000-01"]'
+ y="[0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Independent view
-
-
-
-
-
-
-
-
-
-
+ class="google"
+ x='["2000-01"]'
+ y="[0]">
+ class="microsoft"
+ x='["2000-01"]'
+ y="[0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Independent view
-
-
-
-
-
-
-
-
-
-
+ class="netflix"
+ x='["2000-01"]'
+ y="[0]">
+
+
+ class="labels amazon"
+ x='["2000-01"]'
+ y="[0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Independent view
-
-
-
-
-
-
-
-
-
-
+ class="labels apple"
+ x='["2000-01"]'
+ y="[0]">
+ class="labels google"
+ x='["2000-01"]'
+ y="[0]">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Independent view
-
-
-
-
-
-
-
-
-
-
+ class="labels microsoft"
+ x='["2000-01"]'
+ y="[0]">
+ class="labels netflix"
+ x='["2000-01"]'
+ y="[0]">
@@ -878,16 +253,17 @@ Independent view
+ values='["2000-01", "2000-02", "2000-03"]'>
+ values='["2000-01", "2000-02", "2000-03"]'>
+ values='["2000-01", "2000-02", "2000-03"]'>
@@ -896,23 +272,30 @@ Independent view
+ count="10">
+ count="10">
+ count="10">
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/charts/example.js b/packages/charts/example.js
new file mode 100644
index 0000000..9c1f4fc
--- /dev/null
+++ b/packages/charts/example.js
@@ -0,0 +1,344 @@
+const frame = window.q = document.getElementById("query");
+const axis = document.querySelector("horizontal-axis-tick.tick[dimension=x]");
+
+frame.query();
+frame.addEventListener("hdml-data", (event) => {
+ window.res = event.detail.table;
+
+ const numRows = event.detail.table.numRows;
+ const labels = res.getChild("label");
+ const avgAmazonVolumes = res.getChild("avg_amazon_volume");
+ const avgAppleVolumes = res.getChild("avg_apple_volume");
+ const avgGoogleVolumes = res.getChild("avg_google_volume");
+ const avgMicrosoftVolumes = res.getChild("avg_microsoft_volume");
+ const avgNetflixVolumes = res.getChild("avg_netflix_volume");
+
+ const min = {
+ avgAmazonDate: labels.get(0),
+ avgAmazonVolume: +avgAmazonVolumes.get(0),
+ avgAppleDate: labels.get(0),
+ avgAppleVolume: +avgAppleVolumes.get(0),
+ avgGoogleDate: labels.get(0),
+ avgGoogleVolume: +avgGoogleVolumes.get(0),
+ avgMicrosoftDate: labels.get(0),
+ avgMicrosoftVolume: +avgMicrosoftVolumes.get(0),
+ avgNetflixDate: labels.get(0),
+ avgNetflixVolume: +avgNetflixVolumes.get(0),
+ };
+ const max = {
+ avgAmazonDate: labels.get(0),
+ avgAmazonVolume: +avgAmazonVolumes.get(0),
+ avgAppleDate: labels.get(0),
+ avgAppleVolume: +avgAppleVolumes.get(0),
+ avgGoogleDate: labels.get(0),
+ avgGoogleVolume: +avgGoogleVolumes.get(0),
+ avgMicrosoftDate: labels.get(0),
+ avgMicrosoftVolume: +avgMicrosoftVolumes.get(0),
+ avgNetflixDate: labels.get(0),
+ avgNetflixVolume: +avgNetflixVolumes.get(0),
+ };
+
+ for(let i = 1; i < numRows; i++) {
+ if (+avgAmazonVolumes.get(i) < min.avgAmazonVolume) {
+ min.avgAmazonDate = labels.get(i);
+ min.avgAmazonVolume = +avgAmazonVolumes.get(i);
+ } else if (+avgAmazonVolumes.get(i) > max.avgAmazonVolume) {
+ max.avgAmazonDate = labels.get(i);
+ max.avgAmazonVolume = +avgAmazonVolumes.get(i);
+ }
+ if (+avgAppleVolumes.get(i) < min.avgAppleVolume) {
+ min.avgAppleDate = labels.get(i);
+ min.avgAppleVolume = +avgAppleVolumes.get(i);
+ } else if (+avgAppleVolumes.get(i) > max.avgAppleVolume) {
+ max.avgAppleDate = labels.get(i);
+ max.avgAppleVolume = +avgAppleVolumes.get(i);
+ }
+ if (+avgGoogleVolumes.get(i) < min.avgGoogleVolume) {
+ min.avgGoogleDate = labels.get(i);
+ min.avgGoogleVolume = +avgGoogleVolumes.get(i);
+ } else if (+avgGoogleVolumes.get(i) > max.avgGoogleVolume) {
+ max.avgGoogleDate = labels.get(i);
+ max.avgGoogleVolume = +avgGoogleVolumes.get(i);
+ }
+ if (+avgMicrosoftVolumes.get(i) < min.avgMicrosoftVolume) {
+ min.avgMicrosoftDate = labels.get(i);
+ min.avgMicrosoftVolume = +avgMicrosoftVolumes.get(i);
+ } else if (+avgMicrosoftVolumes.get(i) > max.avgMicrosoftVolume) {
+ max.avgMicrosoftDate = labels.get(i);
+ max.avgMicrosoftVolume = +avgMicrosoftVolumes.get(i);
+ }
+ if (+avgNetflixVolumes.get(i) < min.avgNetflixVolume) {
+ min.avgNetflixDate = labels.get(i);
+ min.avgNetflixVolume = +avgNetflixVolumes.get(i);
+ } else if (+avgNetflixVolumes.get(i) > max.avgNetflixVolume) {
+ max.avgNetflixDate = labels.get(i);
+ max.avgNetflixVolume = +avgNetflixVolumes.get(i);
+ }
+ }
+
+ const minScale = Math.min(
+ min.avgAmazonVolume,
+ min.avgAppleVolume,
+ min.avgGoogleVolume,
+ min.avgMicrosoftVolume,
+ min.avgNetflixVolume,
+ );
+ const maxScale = Math.max(
+ max.avgAmazonVolume,
+ max.avgAppleVolume,
+ max.avgGoogleVolume,
+ max.avgMicrosoftVolume,
+ max.avgNetflixVolume,
+ );
+
+ const labelsAttrValues = JSON.stringify(res.getChild("label").toArray());
+
+ // Scale X
+ document
+ .querySelector("hdml-view ordinal-scale")
+ .setAttribute("values", labelsAttrValues);
+
+ // X-axis
+ document
+ .querySelector("hdml-view horizontal-axis-grid[dimension=x]")
+ .setAttribute("values", labelsAttrValues);
+ document
+ .querySelector("hdml-view horizontal-axis-tick[dimension=x]")
+ .setAttribute("values", labelsAttrValues);
+ document
+ .querySelector("hdml-view horizontal-axis-tick.labels[dimension=x]")
+ .setAttribute("values", labelsAttrValues);
+
+ // Scale Y
+ document
+ .querySelector("hdml-view linear-scale")
+ .setAttribute("min", minScale);
+ document
+ .querySelector("hdml-view linear-scale")
+ .setAttribute("max", maxScale);
+
+ // Lines
+ document
+ .querySelector("hdml-view data-line.amazon")
+ .setAttribute("x", labelsAttrValues);
+ document
+ .querySelector("hdml-view data-line.amazon")
+ .setAttribute("y", avgAmazonVolumes.toString());
+ document
+ .querySelector("hdml-view data-line.apple")
+ .setAttribute("x", labelsAttrValues);
+ document
+ .querySelector("hdml-view data-line.apple")
+ .setAttribute("y", avgAppleVolumes.toString());
+ document
+ .querySelector("hdml-view data-line.google")
+ .setAttribute("x", labelsAttrValues);
+ document
+ .querySelector("hdml-view data-line.google")
+ .setAttribute("y", avgGoogleVolumes.toString());
+ document
+ .querySelector("hdml-view data-line.microsoft")
+ .setAttribute("x", labelsAttrValues);
+ document
+ .querySelector("hdml-view data-line.microsoft")
+ .setAttribute("y", avgMicrosoftVolumes.toString());
+ document
+ .querySelector("hdml-view data-line.netflix")
+ .setAttribute("x", labelsAttrValues);
+ document
+ .querySelector("hdml-view data-line.netflix")
+ .setAttribute("y", avgNetflixVolumes.toString());
+
+ // Points (max)
+ document
+ .querySelector("hdml-view data-point.amazon")
+ .setAttribute("x", `["${max.avgAmazonDate}"]`);
+ document
+ .querySelector("hdml-view data-point.amazon")
+ .setAttribute("y", `[${max.avgAmazonVolume}]`);
+ document
+ .querySelector("hdml-view data-point.apple")
+ .setAttribute("x", `["${max.avgAppleDate}"]`);
+ document
+ .querySelector("hdml-view data-point.apple")
+ .setAttribute("y", `[${max.avgAppleVolume}]`);
+ document
+ .querySelector("hdml-view data-point.google")
+ .setAttribute("x", `["${max.avgGoogleDate}"]`);
+ document
+ .querySelector("hdml-view data-point.google")
+ .setAttribute("y", `[${max.avgGoogleVolume}]`);
+ document
+ .querySelector("hdml-view data-point.microsoft")
+ .setAttribute("x", `["${max.avgMicrosoftDate}"]`);
+ document
+ .querySelector("hdml-view data-point.microsoft")
+ .setAttribute("y", `[${max.avgMicrosoftVolume}]`);
+ document
+ .querySelector("hdml-view data-point.netflix")
+ .setAttribute("x", `["${max.avgNetflixDate}"]`);
+ document
+ .querySelector("hdml-view data-point.netflix")
+ .setAttribute("y", `[${max.avgNetflixVolume}]`);
+
+ // Labels (max)
+ document
+ .querySelector("hdml-view data-point.labels.amazon")
+ .setAttribute("x", `["${max.avgAmazonDate}"]`);
+ document
+ .querySelector("hdml-view data-point.labels.amazon")
+ .setAttribute("y", `[${max.avgAmazonVolume}]`);
+ document
+ .querySelector("hdml-view data-point.labels.apple")
+ .setAttribute("x", `["${max.avgAppleDate}"]`);
+ document
+ .querySelector("hdml-view data-point.labels.apple")
+ .setAttribute("y", `[${max.avgAppleVolume}]`);
+ document
+ .querySelector("hdml-view data-point.labels.google")
+ .setAttribute("x", `["${max.avgGoogleDate}"]`);
+ document
+ .querySelector("hdml-view data-point.labels.google")
+ .setAttribute("y", `[${max.avgGoogleVolume}]`);
+ document
+ .querySelector("hdml-view data-point.labels.microsoft")
+ .setAttribute("x", `["${max.avgMicrosoftDate}"]`);
+ document
+ .querySelector("hdml-view data-point.labels.microsoft")
+ .setAttribute("y", `[${max.avgMicrosoftVolume}]`);
+ document
+ .querySelector("hdml-view data-point.labels.netflix")
+ .setAttribute("x", `["${max.avgNetflixDate}"]`);
+ document
+ .querySelector("hdml-view data-point.labels.netflix")
+ .setAttribute("y", `[${max.avgNetflixVolume}]`);
+});
+
+axis.addEventListener("click", (evt) => {
+ if (evt.target.classList.contains("year")) {
+ const year = +evt.datum;
+ evt
+ .target
+ .classList
+ .replace("year", "month");
+
+ frame
+ .querySelector("hdml-field[name=label]")
+ .setAttribute(
+ "clause",
+ "concat(cast(`year` as varchar), '-', cast(`month` as varchar))",
+ );
+
+ frame
+ .querySelector("hdml-field[name=year]")
+ .insertAdjacentHTML(
+ "afterend",
+ "