ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/showcase/pages/album.tsx

@@ -0,0 +1,30 @@
+import { View, Label, Image } from "./evg_types";
+
+/**
+ * Grid: a photo-book spread drawn as a picture of named areas.
+ *
+ * Every rule lives in the stylesheet — this file says WHAT is on the page,
+ * never how it looks. `grid-template-areas` is in the CSS too, so a theme can
+ * rearrange the whole spread without touching the tree.
+ */
+function render() {
+  return (
+    <View className="page">
+      <Label className="eyebrow">Kaivopuisto</Label>
+      <Label className="title">Ensimmäinen sulaminen</Label>
+      <View className="rule" />
+
+      <View className="spread">
+        <Image className="cell hero" src="../../../../gallery/pdf_writer/assets/images/Canon_40D_scaled.jpg" />
+        <Image className="cell" src="../../../../gallery/pdf_writer/assets/images/Example_scaled.jpg" />
+        <Image className="cell" src="../../../../gallery/pdf_writer/assets/images/Canon_40D_scaled.jpg" />
+        <Image className="cell wide" src="../../../../gallery/pdf_writer/assets/images/Example_scaled.jpg" />
+      </View>
+
+      <Label className="caption">
+        Kaksitoista päivää rantaviivaa pitkin — ensimmäisestä sulamisesta
+        juhannuksen valoon.
+      </Label>
+    </View>
+  );
+}

package/dist/lib/evg/showcase/pages/boxmodel.tsx

@@ -0,0 +1,37 @@
+import { View, Label } from "./evg_types";
+
+/**
+ * Box model: padding, per-side padding, margins, borders and nesting — all
+ * checked against a browser by gallery/pdf_writer/test/run_layout.sh, which
+ * is where the numbers behind this page come from.
+ */
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Laatikkomalli</Label>
+      <View className="rule" />
+
+      <Label className="subhead">Täyte ja reunus</Label>
+      <View className="row">
+        <View className="demo padded"><View className="inner" /></View>
+        <View className="demo padSides"><View className="inner" /></View>
+        <View className="demo bordered"><View className="inner" /></View>
+      </View>
+
+      <Label className="subhead">Sisäkkäiset laatikot</Label>
+      <View className="nest l1">
+        <View className="nest l2">
+          <View className="nest l3">
+            <View className="nest l4" />
+          </View>
+        </View>
+      </View>
+
+      <Label className="subhead">Marginaalit erikseen</Label>
+      <View className="demo padded">
+        <View className="inner marA" />
+        <View className="inner marB" />
+      </View>
+    </View>
+  );
+}

package/dist/lib/evg/showcase/pages/cards.tsx

@@ -0,0 +1,41 @@
+import { View, Label, Image } from "./evg_types";
+
+/**
+ * subgrid: three cards whose captions line up with each other.
+ *
+ * Each card spans the outer grid's two rows and declares
+ * `grid-template-rows: subgrid`, so the photo band and the caption band are
+ * shared across all three — even though the captions are different lengths.
+ * Without subgrid each card would divide its own height and the captions
+ * would sit at three different heights.
+ */
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Kortit, samalla rivillä</Label>
+      <View className="rule" />
+
+      <View className="deck">
+        <View className="card">
+          <Image className="shot" src="../../../../gallery/pdf_writer/assets/images/Canon_40D_scaled.jpg" />
+          <Label className="cardcap">Lyhyt.</Label>
+        </View>
+        <View className="card">
+          <Image className="shot" src="../../../../gallery/pdf_writer/assets/images/Example_scaled.jpg" />
+          <Label className="cardcap">
+            Hieman pidempi kuvateksti, joka kiertää usealle riville.
+          </Label>
+        </View>
+        <View className="card">
+          <Image className="shot" src="../../../../gallery/pdf_writer/assets/images/Canon_40D_scaled.jpg" />
+          <Label className="cardcap">Keskimittainen teksti tähän.</Label>
+        </View>
+      </View>
+
+      <Label className="caption">
+        Jokainen kortti perii ulomman ruudukon rivit, joten kuvatekstit
+        alkavat samalta korkeudelta.
+      </Label>
+    </View>
+  );
+}

package/dist/lib/evg/showcase/pages/chart_api.tsx

@@ -0,0 +1,170 @@
+// GENERATED by gallery/vela/tools/vela_chart_page.rgr — do not edit by hand.
+//
+// No specification was read to draw this page. Every chart on it was built
+// by CALLING gallery/vela/src/VlChart.rgr, and the lines printed beside each
+// chart are the calls that built it — read out of the tool's own source, so
+// the code on the page and the code that drew it cannot drift apart.
+//
+// Regenerate with:  npm run vela:showcase
+
+import { View, Label, Path } from "./evg_types";
+
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Kaavio-API</Label>
+      <View className="rule" />
+      <Label className="body">{"Yhtäkään spesifikaatiota ei luettu. Jokainen kaavio on rakennettu kutsumalla VlChart-rajapintaa, ja kaavion yllä lukevat rivit ovat ne kutsut jotka sen piirsivät — luettuna generaattorin omasta lähdekoodista, jotta sivun koodi ja sivun piirtänyt koodi eivät voi erkaantua."}</Label>
+      <View className="row chartRow">
+        <View className="chartCell">
+          <Label className="subhead">Summa alueittain</Label>
+          <View className="codeBlock">
+            <Label className="codeLine">{"def chart (VlChart.create(rows))"}</Label>
+            <Label className="codeLine">{"chart.size(150 95)"}</Label>
+            <Label className="codeLine">{"def bars (chart.bar())"}</Label>
+            <Label className="codeLine">{"bars.x(\"region\").keepOrder()"}</Label>
+            <Label className="codeLine">{"bars.y(\"sales\").aggregate(\"sum\").title(\"myynti\")"}</Label>
+          </View>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="220.55px" height="172px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M66.05,10.5 L216.05,10.5 L216.05,105.5 L66.05,105.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M66.05,105.5 L216.05,105.5 M66.05,73.5 L216.05,73.5 M66.05,42.5 L216.05,42.5 M66.05,10.5 L216.05,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M103.05,105.5 L103.05,110.5 M178.05,105.5 L178.05,110.5" />
+            <Label className="chartLabel" position="absolute" left="84.362px" top="106.5px" width="37.375px" textAlign="center" fontSize="10px" rotate="270">Länsi</Label>
+            <Label className="chartLabel" position="absolute" left="165.863px" top="106.5px" width="24.375px" textAlign="center" fontSize="10px" rotate="270">Itä</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M66.05,105.5 L216.05,105.5" />
+            <Label className="chartTitle" position="absolute" left="116.6px" top="156.5px" width="48.9px" textAlign="center" fontSize="11px" fontWeight="bold">region</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M66.05,105.5 L61.05,105.5 M66.05,73.5 L61.05,73.5 M66.05,42.5 L61.05,42.5 M66.05,10.5 L61.05,10.5" />
+            <Label className="chartLabel" position="absolute" left="46.425px" top="100.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="33.175px" top="68.833px" width="25.875px" textAlign="right" fontSize="10px">200</Label>
+            <Label className="chartLabel" position="absolute" left="33.175px" top="37.167px" width="25.875px" textAlign="right" fontSize="10px">400</Label>
+            <Label className="chartLabel" position="absolute" left="33.175px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">600</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" fill="none" strokeWidth="1" d="M66.05,105.5 L66.05,10.5" />
+            <Label className="chartTitle" position="absolute" left="-0px" top="51.4px" width="48.9px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">myynti</Label>
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="220.55px" height="172px" viewBox="0 0 220.55 172" stroke="none" d="M69.3,15.5417 L136.8,15.5417 L136.8,105 L69.3,105 Z M144.3,40.7167 L211.8,40.7167 L211.8,105 L144.3,105 Z" />
+          </View>
+        </View>
+          <Label className="caption">31 piirtokomentoa</Label>
+        </View>
+        <View className="chartCell">
+          <Label className="subhead">Aikasarja · tyypit datasta</Label>
+          <View className="codeBlock">
+            <Label className="codeLine">{"def chart (VlChart.create(rows))"}</Label>
+            <Label className="codeLine">{"chart.size(100 85)"}</Label>
+            <Label className="codeLine">{"def line (chart.line())"}</Label>
+            <Label className="codeLine">{"line.withPoints(true)"}</Label>
+            <Label className="codeLine">{"line.x(\"quarter\").y(\"sales\").color(\"region\")"}</Label>
+          </View>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="244.975px" height="127px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,5.5 L162.475,5.5 L162.475,90.5 L62.475,90.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,5.5 L62.475,90.5 M95.475,5.5 L95.475,90.5 M128.475,5.5 L128.475,90.5 M162.475,5.5 L162.475,90.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L162.475,90.5 M62.475,66.5 L162.475,66.5 M62.475,43.5 L162.475,43.5 M62.475,19.5 L162.475,19.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L62.475,95.5 M95.475,90.5 L95.475,95.5 M128.475,90.5 L128.475,95.5 M162.475,90.5 L162.475,95.5" />
+            <Label className="chartLabel" position="absolute" left="62.475px" top="97.5px" width="32.5px" textAlign="left" fontSize="10px">2016</Label>
+            <Label className="chartLabel" position="absolute" left="109.35px" top="97.5px" width="53.125px" textAlign="right" fontSize="10px">October</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L162.475,90.5" />
+            <Label className="chartTitle" position="absolute" left="84.45px" top="111.5px" width="56.05px" textAlign="center" fontSize="11px" fontWeight="bold">quarter</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L57.475,90.5 M62.475,66.5 L57.475,66.5 M62.475,43.5 L57.475,43.5 M62.475,19.5 L57.475,19.5" />
+            <Label className="chartLabel" position="absolute" left="42.85px" top="85.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="36.225px" top="61.889px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="38.278px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="14.667px" width="25.875px" textAlign="right" fontSize="10px">150</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L62.475,5.5" />
+            <Label className="chartTitle" position="absolute" left="0px" top="41.4px" width="41.75px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">sales</Label>
+            <Path className="chartStroke1" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="2" d="M61.975,33.3333 L95.1867,21.5278 L128.3984,27.6667 L161.975,10.6667" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" fill="none" strokeWidth="2" d="M61.975,46.0833 L95.1867,48.4444 L128.3984,40.8889 L161.975,32.8611" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" stroke="none" d="M64.7136,33.3333 C64.7136,34.8458 63.4875,36.0719 61.975,36.0719 C60.4625,36.0719 59.2364,34.8458 59.2364,33.3333 C59.2364,31.8208 60.4625,30.5947 61.975,30.5947 C63.4875,30.5947 64.7136,31.8208 64.7136,33.3333 Z M97.9253,21.5278 C97.9253,23.0403 96.6992,24.2664 95.1867,24.2664 C93.6742,24.2664 92.4481,23.0403 92.4481,21.5278 C92.4481,20.0153 93.6742,18.7892 95.1867,18.7892 C96.6992,18.7892 97.9253,20.0153 97.9253,21.5278 Z M131.137,27.6667 C131.137,29.1792 129.9109,30.4053 128.3984,30.4053 C126.8859,30.4053 125.6597,29.1792 125.6597,27.6667 C125.6597,26.1542 126.8859,24.9281 128.3984,24.9281 C129.9109,24.9281 131.137,26.1542 131.137,27.6667 Z M164.7136,10.6667 C164.7136,12.1792 163.4875,13.4053 161.975,13.4053 C160.4625,13.4053 159.2364,12.1792 159.2364,10.6667 C159.2364,9.1542 160.4625,7.9281 161.975,7.9281 C163.4875,7.9281 164.7136,9.1542 164.7136,10.6667 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" stroke="none" d="M64.7136,46.0833 C64.7136,47.5958 63.4875,48.8219 61.975,48.8219 C60.4625,48.8219 59.2364,47.5958 59.2364,46.0833 C59.2364,44.5708 60.4625,43.3447 61.975,43.3447 C63.4875,43.3447 64.7136,44.5708 64.7136,46.0833 Z M97.9253,48.4444 C97.9253,49.9569 96.6992,51.1831 95.1867,51.1831 C93.6742,51.1831 92.4481,49.9569 92.4481,48.4444 C92.4481,46.932 93.6742,45.7058 95.1867,45.7058 C96.6992,45.7058 97.9253,46.932 97.9253,48.4444 Z M131.137,40.8889 C131.137,42.4014 129.9109,43.6275 128.3984,43.6275 C126.8859,43.6275 125.6597,42.4014 125.6597,40.8889 C125.6597,39.3764 126.8859,38.1503 128.3984,38.1503 C129.9109,38.1503 131.137,39.3764 131.137,40.8889 Z M164.7136,32.8611 C164.7136,34.3736 163.4875,35.5997 161.975,35.5997 C160.4625,35.5997 159.2364,34.3736 159.2364,32.8611 C159.2364,31.3486 160.4625,30.1225 161.975,30.1225 C163.4875,30.1225 164.7136,31.3486 164.7136,32.8611 Z" />
+            <Path className="chartFill0 chartStroke0" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" strokeWidth="1.5" d="M194.975,27 C194.975,29.7614 192.7364,32 189.975,32 C187.2136,32 184.975,29.7614 184.975,27 C184.975,24.2386 187.2136,22 189.975,22 C192.7364,22 194.975,24.2386 194.975,27 Z" />
+            <Label className="chartLabel" position="absolute" left="199.975px" top="22px" width="24.375px" textAlign="left" fontSize="10px">Itä</Label>
+            <Path className="chartFill1 chartStroke1" position="absolute" left="0px" top="0px" width="244.975px" height="127px" viewBox="0 0 244.975 127" strokeWidth="1.5" d="M194.975,45 C194.975,47.7614 192.7364,50 189.975,50 C187.2136,50 184.975,47.7614 184.975,45 C184.975,42.2386 187.2136,40 189.975,40 C192.7364,40 194.975,42.2386 194.975,45 Z" />
+            <Label className="chartLabel" position="absolute" left="199.975px" top="40px" width="37.375px" textAlign="left" fontSize="10px">Länsi</Label>
+            <Label className="chartTitle" position="absolute" left="183.975px" top="5px" width="48.9px" textAlign="left" fontSize="11px" fontWeight="bold">region</Label>
+          </View>
+        </View>
+          <Label className="caption">66 piirtokomentoa</Label>
+        </View>
+      </View>
+      <View className="row chartRow">
+        <View className="chartCell">
+          <Label className="subhead">Jaettu enkoodaus · kaksi merkkiä</Label>
+          <View className="codeBlock">
+            <Label className="codeLine">{"def chart (VlChart.create(rows))"}</Label>
+            <Label className="codeLine">{"chart.size(100 85)"}</Label>
+            <Label className="codeLine">{"chart.x(\"quarter\").y(\"sales\").color(\"region\")"}</Label>
+            <Label className="codeLine">{"chart.area().markOpacity(0.35)"}</Label>
+            <Label className="codeLine">{"chart.line()"}</Label>
+          </View>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="244.975px" height="132px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,10.5 L162.475,10.5 L162.475,95.5 L62.475,95.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,10.5 L62.475,95.5 M95.475,10.5 L95.475,95.5 M128.475,10.5 L128.475,95.5 M162.475,10.5 L162.475,95.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,95.5 L162.475,95.5 M62.475,67.5 L162.475,67.5 M62.475,38.5 L162.475,38.5 M62.475,10.5 L162.475,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,95.5 L62.475,100.5 M95.475,95.5 L95.475,100.5 M128.475,95.5 L128.475,100.5 M162.475,95.5 L162.475,100.5" />
+            <Label className="chartLabel" position="absolute" left="62.475px" top="102.5px" width="32.5px" textAlign="left" fontSize="10px">2016</Label>
+            <Label className="chartLabel" position="absolute" left="109.35px" top="102.5px" width="53.125px" textAlign="right" fontSize="10px">October</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,95.5 L162.475,95.5" />
+            <Label className="chartTitle" position="absolute" left="84.45px" top="116.5px" width="56.05px" textAlign="center" fontSize="11px" fontWeight="bold">quarter</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,95.5 L57.475,95.5 M62.475,67.5 L57.475,67.5 M62.475,38.5 L57.475,38.5 M62.475,10.5 L57.475,10.5" />
+            <Label className="chartLabel" position="absolute" left="42.85px" top="90.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="62.167px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="33.833px" width="25.875px" textAlign="right" fontSize="10px">200</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">300</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="1" d="M62.475,95.5 L62.475,10.5" />
+            <Label className="chartTitle" position="absolute" left="0px" top="46.4px" width="41.75px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">sales</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" stroke="none" opacity="0.35" d="M61.975,61 L95.1867,53.9167 L128.3984,57.6 L161.975,47.4 L161.975,95 L128.3984,95 L95.1867,95 L61.975,95 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" stroke="none" opacity="0.35" d="M61.975,34.65 L95.1867,28.9833 L128.3984,28.1333 L161.975,13.1167 L161.975,47.4 L128.3984,57.6 L95.1867,53.9167 L61.975,61 Z" />
+            <Path className="chartStroke1" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="2" d="M61.975,61 L95.1867,53.9167 L128.3984,57.6 L161.975,47.4" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" fill="none" strokeWidth="2" d="M61.975,68.65 L95.1867,70.0667 L128.3984,65.5333 L161.975,60.7167" />
+            <Path className="chartFill0 chartStroke0" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" strokeWidth="1.5" opacity="0.35" d="M194.975,32 C194.975,34.7614 192.7364,37 189.975,37 C187.2136,37 184.975,34.7614 184.975,32 C184.975,29.2386 187.2136,27 189.975,27 C192.7364,27 194.975,29.2386 194.975,32 Z" />
+            <Label className="chartLabel" position="absolute" left="199.975px" top="27px" width="24.375px" textAlign="left" fontSize="10px">Itä</Label>
+            <Path className="chartFill1 chartStroke1" position="absolute" left="0px" top="0px" width="244.975px" height="132px" viewBox="0 0 244.975 132" strokeWidth="1.5" opacity="0.35" d="M194.975,50 C194.975,52.7614 192.7364,55 189.975,55 C187.2136,55 184.975,52.7614 184.975,50 C184.975,47.2386 187.2136,45 189.975,45 C192.7364,45 194.975,47.2386 194.975,50 Z" />
+            <Label className="chartLabel" position="absolute" left="199.975px" top="45px" width="37.375px" textAlign="left" fontSize="10px">Länsi</Label>
+            <Label className="chartTitle" position="absolute" left="183.975px" top="10px" width="48.9px" textAlign="left" fontSize="11px" fontWeight="bold">region</Label>
+          </View>
+        </View>
+          <Label className="caption">64 piirtokomentoa</Label>
+        </View>
+        <View className="chartCell">
+          <Label className="subhead">Ryhmitellyt pylväät</Label>
+          <View className="codeBlock">
+            <Label className="codeLine">{"def chart (VlChart.create(rows))"}</Label>
+            <Label className="codeLine">{"chart.size(100 85)"}</Label>
+            <Label className="codeLine">{"def bars (chart.bar())"}</Label>
+            <Label className="codeLine">{"bars.x(\"quarter\").timeUnit(\"yearquarter\").type(\"ordinal\")"}</Label>
+            <Label className="codeLine">{"bars.y(\"sales\").color(\"region\").xOffset(\"region\")"}</Label>
+          </View>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="240.975px" height="127px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M62.475,5.5 L162.475,5.5 L162.475,90.5 L62.475,90.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L162.475,90.5 M62.475,66.5 L162.475,66.5 M62.475,43.5 L162.475,43.5 M62.475,19.5 L162.475,19.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M76.475,90.5 L76.475,95.5 M100.475,90.5 L100.475,95.5 M123.475,90.5 L123.475,95.5 M147.475,90.5 L147.475,95.5" />
+            <Label className="chartLabel" position="absolute" left="51.073px" top="97.5px" width="50.375px" textAlign="center" fontSize="10px">2016 Q1</Label>
+            <Label className="chartLabel" position="absolute" left="122.502px" top="97.5px" width="50.375px" textAlign="center" fontSize="10px">2016 Q4</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L162.475,90.5" />
+            <Label className="chartTitle" position="absolute" left="37.219px" top="111.5px" width="150.512px" textAlign="center" fontSize="11px" fontWeight="bold">quarter (year-quarter)</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L57.475,90.5 M62.475,66.5 L57.475,66.5 M62.475,43.5 L57.475,43.5 M62.475,19.5 L57.475,19.5" />
+            <Label className="chartLabel" position="absolute" left="42.85px" top="85.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="36.225px" top="61.889px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="38.278px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Label className="chartLabel" position="absolute" left="29.6px" top="14.667px" width="25.875px" textAlign="right" fontSize="10px">150</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" fill="none" strokeWidth="1" d="M62.475,90.5 L62.475,5.5" />
+            <Label className="chartTitle" position="absolute" left="0px" top="41.4px" width="41.75px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">sales</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" stroke="none" d="M76.2607,33.3333 L85.7845,33.3333 L85.7845,90 L76.2607,90 Z M100.0702,21.5278 L109.594,21.5278 L109.594,90 L100.0702,90 Z M123.8798,27.6667 L133.4036,27.6667 L133.4036,90 L123.8798,90 Z M147.6893,10.6667 L157.2131,10.6667 L157.2131,90 L147.6893,90 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" stroke="none" d="M66.7369,46.0833 L76.2607,46.0833 L76.2607,90 L66.7369,90 Z M90.5464,48.4444 L100.0702,48.4444 L100.0702,90 L90.5464,90 Z M114.356,40.8889 L123.8798,40.8889 L123.8798,90 L114.356,90 Z M138.1655,32.8611 L147.6893,32.8611 L147.6893,90 L138.1655,90 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" stroke="none" d="M180.975,22 L190.975,22 L190.975,32 L180.975,32 Z" />
+            <Label className="chartLabel" position="absolute" left="195.975px" top="22px" width="24.375px" textAlign="left" fontSize="10px">Itä</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="240.975px" height="127px" viewBox="0 0 240.975 127" stroke="none" d="M180.975,35 L190.975,35 L190.975,45 L180.975,45 Z" />
+            <Label className="chartLabel" position="absolute" left="195.975px" top="35px" width="37.375px" textAlign="left" fontSize="10px">Länsi</Label>
+            <Label className="chartTitle" position="absolute" left="179.975px" top="5px" width="48.9px" textAlign="left" fontSize="11px" fontWeight="bold">region</Label>
+          </View>
+        </View>
+          <Label className="caption">54 piirtokomentoa</Label>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default render;

package/dist/lib/evg/showcase/pages/charts.tsx

@@ -0,0 +1,219 @@
+// GENERATED by gallery/vela/tools/vela_evg.rgr — do not edit by hand.
+//
+// Each chart below is an unmodified Vega specification, compiled from a
+// Vega-Lite example, run through the Vela runtime and drawn with the EVG
+// vector layer: every gridline, bar, wedge and label is path data and text
+// this repository computed, in all three targets.
+//
+// Regenerate with:  npm run vela:showcase
+
+import { View, Label, Path } from "./evg_types";
+
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Kaaviot</Label>
+      <View className="rule" />
+      <View className="row chartRow">
+        <View className="chartCell">
+          <Label className="subhead">Pylväskaavio</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="226px" height="147px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" opacity="0.4" d="M51.5,10.5 L221.5,10.5 L221.5,110.5 L51.5,110.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" opacity="0.25" d="M51.5,110.5 L221.5,110.5 M51.5,60.5 L221.5,60.5 M51.5,10.5 L221.5,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" d="M60.5,110.5 L60.5,115.5 M79.5,110.5 L79.5,115.5 M98.5,110.5 L98.5,115.5 M117.5,110.5 L117.5,115.5 M136.5,110.5 L136.5,115.5 M154.5,110.5 L154.5,115.5 M173.5,110.5 L173.5,115.5 M192.5,110.5 L192.5,115.5 M211.5,110.5 L211.5,115.5" />
+            <Label className="chartLabel" position="absolute" left="53.382px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">A</Label>
+            <Label className="chartLabel" position="absolute" left="72.271px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">B</Label>
+            <Label className="chartLabel" position="absolute" left="91.16px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">C</Label>
+            <Label className="chartLabel" position="absolute" left="110.049px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">D</Label>
+            <Label className="chartLabel" position="absolute" left="128.938px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">E</Label>
+            <Label className="chartLabel" position="absolute" left="147.826px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">F</Label>
+            <Label className="chartLabel" position="absolute" left="166.715px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">G</Label>
+            <Label className="chartLabel" position="absolute" left="185.604px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">H</Label>
+            <Label className="chartLabel" position="absolute" left="204.493px" top="117.5px" width="14.125px" textAlign="center" fontSize="10px">I</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" d="M51.5,110.5 L221.5,110.5" />
+            <Label className="chartTitle" position="absolute" left="129.925px" top="131.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">a</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" d="M51.5,110.5 L46.5,110.5 M51.5,60.5 L46.5,60.5 M51.5,10.5 L46.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="105.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="25.25px" top="55.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" fill="none" strokeWidth="1" d="M51.5,110.5 L51.5,10.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="53.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="226px" height="147px" viewBox="0 0 226 147" stroke="none" d="M51.9444,82 L68.9444,82 L68.9444,110 L51.9444,110 Z M70.8333,55 L87.8333,55 L87.8333,110 L70.8333,110 Z M89.7222,67 L106.7222,67 L106.7222,110 L89.7222,110 Z M108.6111,19 L125.6111,19 L125.6111,110 L108.6111,110 Z M127.5,29 L144.5,29 L144.5,110 L127.5,110 Z M146.3889,57 L163.3889,57 L163.3889,110 L146.3889,110 Z M165.2778,91 L182.2778,91 L182.2778,110 L165.2778,110 Z M184.1667,23 L201.1667,23 L201.1667,110 L184.1667,110 Z M203.0556,58 L220.0556,58 L220.0556,110 L203.0556,110 Z" />
+          </View>
+        </View>
+          <Label className="caption">49 piirtokomentoa · bar.vg.json</Label>
+        </View>
+        <View className="chartCell">
+          <Label className="subhead">Pinottu pylväskaavio</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="288.006px" height="146px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" opacity="0.4" d="M70.3813,10.5 L240.3813,10.5 L240.3813,110.5 L70.3813,110.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" opacity="0.25" d="M70.3813,110.5 L240.3813,110.5 M70.3813,77.5 L240.3813,77.5 M70.3813,43.5 L240.3813,43.5 M70.3813,10.5 L240.3813,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" d="M112.3813,110.5 L112.3813,115.5 M197.3813,110.5 L197.3813,115.5" />
+            <Label className="chartLabel" position="absolute" left="106.131px" top="111.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">x</Label>
+            <Label className="chartLabel" position="absolute" left="191.131px" top="111.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">y</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" d="M70.3813,110.5 L240.3813,110.5" />
+            <Label className="chartTitle" position="absolute" left="148.806px" top="129.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" d="M70.3813,110.5 L65.3813,110.5 M70.3813,77.5 L65.3813,77.5 M70.3813,43.5 L65.3813,43.5 M70.3813,10.5 L65.3813,10.5" />
+            <Label className="chartLabel" position="absolute" left="50.756px" top="105.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="37.506px" top="72.167px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Label className="chartLabel" position="absolute" left="37.506px" top="38.833px" width="25.875px" textAlign="right" fontSize="10px">200</Label>
+            <Label className="chartLabel" position="absolute" left="37.506px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">300</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" fill="none" strokeWidth="1" d="M70.3813,110.5 L70.3813,10.5" />
+            <Label className="chartTitle" position="absolute" left="-0px" top="53.9px" width="57.563px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">Sum of b</Label>
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M74.1313,35.6667 L150.6313,35.6667 L150.6313,45 L74.1313,45 Z" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M159.1313,14.6667 L235.6313,14.6667 L235.6313,33 L159.1313,33 Z" />
+            <Path className="chartFill2" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M74.1313,45 L150.6313,45 L150.6313,59.3333 L74.1313,59.3333 Z" />
+            <Path className="chartFill3" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M159.1313,33 L235.6313,33 L235.6313,63.3333 L159.1313,63.3333 Z" />
+            <Path className="chartFill4" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M74.1313,59.3333 L150.6313,59.3333 L150.6313,86.3333 L74.1313,86.3333 Z" />
+            <Path className="chartFill5" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M159.1313,63.3333 L235.6313,63.3333 L235.6313,81 L159.1313,81 Z" />
+            <Path className="chartFill6" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M74.1313,86.3333 L150.6313,86.3333 L150.6313,92.6667 L74.1313,92.6667 Z" />
+            <Path className="chartFill7" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M159.1313,81 L235.6313,81 L235.6313,110 L159.1313,110 Z" />
+            <Path className="chartFill8" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M74.1313,92.6667 L150.6313,92.6667 L150.6313,110 L74.1313,110 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,27 L268.8813,27 L268.8813,37 L258.8813,37 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="27px" width="14.125px" textAlign="left" fontSize="10px">A</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,40 L268.8813,40 L268.8813,50 L258.8813,50 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="40px" width="14.125px" textAlign="left" fontSize="10px">B</Label>
+            <Path className="chartFill2" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,53 L268.8813,53 L268.8813,63 L258.8813,63 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="53px" width="14.125px" textAlign="left" fontSize="10px">C</Label>
+            <Path className="chartFill3" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,66 L268.8813,66 L268.8813,76 L258.8813,76 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="66px" width="14.125px" textAlign="left" fontSize="10px">D</Label>
+            <Path className="chartFill4" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,79 L268.8813,79 L268.8813,89 L258.8813,89 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="79px" width="14.125px" textAlign="left" fontSize="10px">E</Label>
+            <Path className="chartFill5" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,92 L268.8813,92 L268.8813,102 L258.8813,102 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="92px" width="14.125px" textAlign="left" fontSize="10px">F</Label>
+            <Path className="chartFill6" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,105 L268.8813,105 L268.8813,115 L258.8813,115 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="105px" width="14.125px" textAlign="left" fontSize="10px">G</Label>
+            <Path className="chartFill7" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,118 L268.8813,118 L268.8813,128 L258.8813,128 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="118px" width="14.125px" textAlign="left" fontSize="10px">H</Label>
+            <Path className="chartFill8" position="absolute" left="0px" top="0px" width="288.006px" height="146px" viewBox="0 0 288.006 146" stroke="none" d="M258.8813,131 L268.8813,131 L268.8813,141 L258.8813,141 Z" />
+            <Label className="chartLabel" position="absolute" left="273.881px" top="131px" width="14.125px" textAlign="left" fontSize="10px">I</Label>
+            <Label className="chartTitle" position="absolute" left="257.881px" top="10px" width="13.15px" textAlign="left" fontSize="11px" fontWeight="bold">a</Label>
+          </View>
+        </View>
+          <Label className="caption">79 piirtokomentoa · bar_stacked.vg.json</Label>
+        </View>
+      </View>
+      <View className="row chartRow">
+        <View className="chartCell">
+          <Label className="subhead">Viivakaavio</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="230px" height="147px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" opacity="0.4" d="M51.5,10.5 L221.5,10.5 L221.5,110.5 L51.5,110.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" opacity="0.25" d="M72.5,10.5 L72.5,110.5 M115.5,10.5 L115.5,110.5 M157.5,10.5 L157.5,110.5 M200.5,10.5 L200.5,110.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" opacity="0.25" d="M51.5,110.5 L221.5,110.5 M51.5,60.5 L221.5,60.5 M51.5,10.5 L221.5,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" d="M72.5,110.5 L72.5,115.5 M115.5,110.5 L115.5,115.5 M157.5,110.5 L157.5,115.5 M200.5,110.5 L200.5,115.5" />
+            <Label className="chartLabel" position="absolute" left="66.438px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">2</Label>
+            <Label className="chartLabel" position="absolute" left="108.938px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">4</Label>
+            <Label className="chartLabel" position="absolute" left="151.438px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">6</Label>
+            <Label className="chartLabel" position="absolute" left="193.938px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">8</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" d="M51.5,110.5 L221.5,110.5" />
+            <Label className="chartTitle" position="absolute" left="129.925px" top="131.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">c</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" d="M51.5,110.5 L46.5,110.5 M51.5,60.5 L46.5,60.5 M51.5,10.5 L46.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="105.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="25.25px" top="55.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="1" d="M51.5,110.5 L51.5,10.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="53.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="230px" height="147px" viewBox="0 0 230 147" fill="none" strokeWidth="2" d="M51,23 L72.25,67 L93.5,58 L114.75,29 L136,82 L157.25,57 L178.5,19 L199.75,91 L221,55" />
+          </View>
+        </View>
+          <Label className="caption">37 piirtokomentoa · line.vg.json</Label>
+        </View>
+        <View className="chartCell">
+          <Label className="subhead">Hajontakaavio</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="233px" height="147px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" opacity="0.4" d="M51.5,10.5 L221.5,10.5 L221.5,110.5 L51.5,110.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" opacity="0.25" d="M51.5,10.5 L51.5,110.5 M89.5,10.5 L89.5,110.5 M127.5,10.5 L127.5,110.5 M164.5,10.5 L164.5,110.5 M202.5,10.5 L202.5,110.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" opacity="0.25" d="M51.5,110.5 L221.5,110.5 M51.5,60.5 L221.5,60.5 M51.5,10.5 L221.5,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" d="M51.5,110.5 L51.5,115.5 M89.5,110.5 L89.5,115.5 M127.5,110.5 L127.5,115.5 M164.5,110.5 L164.5,115.5 M202.5,110.5 L202.5,115.5" />
+            <Label className="chartLabel" position="absolute" left="51.5px" top="117.5px" width="12.625px" textAlign="left" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="82.965px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">2</Label>
+            <Label className="chartLabel" position="absolute" left="120.743px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">4</Label>
+            <Label className="chartLabel" position="absolute" left="158.521px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">6</Label>
+            <Label className="chartLabel" position="absolute" left="196.299px" top="117.5px" width="12.625px" textAlign="center" fontSize="10px">8</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" d="M51.5,110.5 L221.5,110.5" />
+            <Label className="chartTitle" position="absolute" left="129.925px" top="131.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">c</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" d="M51.5,110.5 L46.5,110.5 M51.5,60.5 L46.5,60.5 M51.5,10.5 L46.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="105.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="25.25px" top="55.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="1" d="M51.5,110.5 L51.5,10.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="53.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="233px" height="147px" viewBox="0 0 233 147" fill="none" strokeWidth="2" opacity="0.7" d="M148.1831,82 C148.1831,83.5125 146.9569,84.7386 145.4444,84.7386 C143.932,84.7386 142.7058,83.5125 142.7058,82 C142.7058,80.4875 143.932,79.2614 145.4444,79.2614 C146.9569,79.2614 148.1831,80.4875 148.1831,82 Z M223.7386,55 C223.7386,56.5125 222.5125,57.7386 221,57.7386 C219.4875,57.7386 218.2614,56.5125 218.2614,55 C218.2614,53.4875 219.4875,52.2614 221,52.2614 C222.5125,52.2614 223.7386,53.4875 223.7386,55 Z M91.5164,67 C91.5164,68.5125 90.2903,69.7386 88.7778,69.7386 C87.2653,69.7386 86.0392,68.5125 86.0392,67 C86.0392,65.4875 87.2653,64.2614 88.7778,64.2614 C90.2903,64.2614 91.5164,65.4875 91.5164,67 Z M185.9608,19 C185.9608,20.5125 184.7347,21.7386 183.2222,21.7386 C181.7097,21.7386 180.4836,20.5125 180.4836,19 C180.4836,17.4875 181.7097,16.2614 183.2222,16.2614 C184.7347,16.2614 185.9608,17.4875 185.9608,19 Z M129.2942,29 C129.2942,30.5125 128.068,31.7386 126.5556,31.7386 C125.0431,31.7386 123.8169,30.5125 123.8169,29 C123.8169,27.4875 125.0431,26.2614 126.5556,26.2614 C128.068,26.2614 129.2942,27.4875 129.2942,29 Z M167.0719,57 C167.0719,58.5125 165.8458,59.7386 164.3333,59.7386 C162.8208,59.7386 161.5947,58.5125 161.5947,57 C161.5947,55.4875 162.8208,54.2614 164.3333,54.2614 C165.8458,54.2614 167.0719,55.4875 167.0719,57 Z M204.8497,91 C204.8497,92.5125 203.6236,93.7386 202.1111,93.7386 C200.5986,93.7386 199.3725,92.5125 199.3725,91 C199.3725,89.4875 200.5986,88.2614 202.1111,88.2614 C203.6236,88.2614 204.8497,89.4875 204.8497,91 Z M72.6275,23 C72.6275,24.5125 71.4014,25.7386 69.8889,25.7386 C68.3764,25.7386 67.1503,24.5125 67.1503,23 C67.1503,21.4875 68.3764,20.2614 69.8889,20.2614 C71.4014,20.2614 72.6275,21.4875 72.6275,23 Z M110.4053,58 C110.4053,59.5125 109.1792,60.7386 107.6667,60.7386 C106.1542,60.7386 104.9281,59.5125 104.9281,58 C104.9281,56.4875 106.1542,55.2614 107.6667,55.2614 C109.1792,55.2614 110.4053,56.4875 110.4053,58 Z" />
+          </View>
+        </View>
+          <Label className="caption">48 piirtokomentoa · scatter.vg.json</Label>
+        </View>
+      </View>
+      <View className="row chartRow">
+        <View className="chartCell">
+          <Label className="subhead">Histogrammi</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="259.375px" height="162px">
+            <Path className="chartFrame" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" opacity="0.4" d="M83.875,25.5 L253.875,25.5 L253.875,125.5 L83.875,125.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" opacity="0.25" d="M83.875,125.5 L253.875,125.5 M83.875,92.5 L253.875,92.5 M83.875,58.5 L253.875,58.5 M83.875,25.5 L253.875,25.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" d="M83.875,125.5 L83.875,130.5 M102.875,125.5 L102.875,130.5 M121.875,125.5 L121.875,130.5 M140.875,125.5 L140.875,130.5 M159.875,125.5 L159.875,130.5 M177.875,125.5 L177.875,130.5 M196.875,125.5 L196.875,130.5 M215.875,125.5 L215.875,130.5 M234.875,125.5 L234.875,130.5 M253.875,125.5 L253.875,130.5" />
+            <Label className="chartLabel" position="absolute" left="83.875px" top="132.5px" width="19.25px" textAlign="left" fontSize="10px">10</Label>
+            <Label className="chartLabel" position="absolute" left="112.028px" top="132.5px" width="19.25px" textAlign="center" fontSize="10px">30</Label>
+            <Label className="chartLabel" position="absolute" left="149.806px" top="132.5px" width="19.25px" textAlign="center" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="187.583px" top="132.5px" width="19.25px" textAlign="center" fontSize="10px">70</Label>
+            <Label className="chartLabel" position="absolute" left="225.361px" top="132.5px" width="19.25px" textAlign="center" fontSize="10px">90</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" d="M83.875,125.5 L253.875,125.5" />
+            <Label className="chartTitle" position="absolute" left="135.006px" top="146.5px" width="67.737px" textAlign="center" fontSize="11px" fontWeight="bold">b (binned)</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" d="M83.875,125.5 L78.875,125.5 M83.875,92.5 L78.875,92.5 M83.875,58.5 L78.875,58.5 M83.875,25.5 L78.875,25.5" />
+            <Label className="chartLabel" position="absolute" left="64.25px" top="120.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="64.25px" top="87.167px" width="12.625px" textAlign="right" fontSize="10px">1</Label>
+            <Label className="chartLabel" position="absolute" left="64.25px" top="53.833px" width="12.625px" textAlign="right" fontSize="10px">2</Label>
+            <Label className="chartLabel" position="absolute" left="64.25px" top="20.5px" width="12.625px" textAlign="right" fontSize="10px">3</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" fill="none" strokeWidth="1" d="M83.875,125.5 L83.875,25.5" />
+            <Label className="chartTitle" position="absolute" left="-0px" top="68.9px" width="116.55px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">Count of Records</Label>
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="259.375px" height="162px" viewBox="0 0 259.375 162" stroke="none" d="M103.2639,91.6667 L121.1528,91.6667 L121.1528,125 L103.2639,125 Z M159.9306,25 L177.8194,25 L177.8194,125 L159.9306,125 Z M141.0417,91.6667 L158.9306,91.6667 L158.9306,125 L141.0417,125 Z M235.4861,91.6667 L253.375,91.6667 L253.375,125 L235.4861,125 Z M216.5972,58.3333 L234.4861,58.3333 L234.4861,125 L216.5972,125 Z M84.375,91.6667 L102.2639,91.6667 L102.2639,125 L84.375,125 Z" />
+          </View>
+        </View>
+          <Label className="caption">51 piirtokomentoa · histogram.vg.json</Label>
+        </View>
+        <View className="chartCell">
+          <Label className="subhead">Ympyräkaavio</Label>
+        <View className="chartBox">
+          <View className="chart" position="relative" width="183.125px" height="141px">
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M70,5 L73.2082,5.0792 L76.4085,5.3167 L79.5933,5.7118 L82.7546,6.2637 L85.8849,6.9709 L88.9765,7.8317 L92.0217,8.8441 L70,70 Z" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M92.0217,8.8441 L94.9604,9.9835 L97.8405,11.2641 L100.655,12.6827 L103.3975,14.2361 L106.0614,15.9207 L108.6406,17.7324 L111.1289,19.6669 L113.5205,21.7199 L115.8097,23.8863 L117.9913,26.1612 L120.06,28.5392 L122.011,31.0146 L123.8397,33.5817 L125.5418,36.2345 L70,70 Z" />
+            <Path className="chartFill2" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M125.5418,36.2345 L127.1058,38.9529 L128.537,41.7436 L129.8318,44.6001 L130.9873,47.5157 L132.0009,50.4836 L132.8701,53.497 L133.593,56.5488 L134.1678,59.6319 L134.5932,62.7391 L134.8682,65.8633 L134.9923,68.9971 L70,70 Z" />
+            <Path className="chartFill3" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M134.9923,68.9971 L134.9637,72.1712 L134.7803,75.3402 L134.4423,78.4965 L133.9507,81.6324 L133.3065,84.7407 L132.5114,87.8138 L131.5671,90.8444 L130.4761,93.8252 L129.2408,96.7493 L127.8643,99.6096 L126.3497,102.3992 L124.7008,105.1116 L122.9214,107.7403 L121.0158,110.2789 L118.9885,112.7215 L116.8444,115.0622 L114.5886,117.2955 L112.2264,119.4159 L109.7635,121.4185 L107.2058,123.2985 L104.5594,125.0513 L101.8306,126.6729 L99.0258,128.1593 L70,70 Z" />
+            <Path className="chartFill4" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M99.0258,128.1593 L96.0831,129.5371 L93.0753,130.7662 L90.0098,131.8434 L86.8943,132.7661 L83.7365,133.5319 L80.5445,134.139 L77.3261,134.5858 L74.0894,134.8712 L70.8425,134.9945 L67.5934,134.9554 L64.3504,134.754 L61.1215,134.3908 L57.9148,133.8666 L54.7383,133.1829 L51.5999,132.3413 L48.5075,131.3439 L45.4688,130.1932 L42.4914,128.8921 L39.5828,127.4438 L36.7501,125.852 L70,70 Z" />
+            <Path className="chartFill5" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M36.7501,125.852 L34.1773,124.2378 L31.6828,122.5051 L29.2718,120.6578 L26.9499,118.6999 L24.7219,116.6357 L22.5927,114.4697 L20.5671,112.2065 L18.6494,109.8512 L16.8438,107.4089 L15.1543,104.8849 L13.5846,102.2847 L12.138,99.614 L10.8178,96.8787 L9.6268,94.0847 L70,70 Z" />
+            <Path className="chartFill6" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M9.6268,94.0847 L8.5638,91.2272 L7.636,88.3231 L6.8455,85.3787 L6.1938,82.4004 L5.6825,79.3948 L70,70 Z" />
+            <Path className="chartFill7" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M5.6825,79.3948 L5.3007,76.2452 L5.073,73.0807 L5.0001,69.9088 L5.0819,66.7372 L5.3185,63.5733 L5.7091,60.4248 L6.253,57.299 L6.9487,54.2035 L7.7946,51.1457 L8.7887,48.1327 L9.9287,45.1719 L11.2117,42.2702 L12.6349,39.4346 L14.1947,36.6718 L15.8874,33.9884 L17.7091,31.3909 L19.6554,28.8853 L21.7216,26.4776 L23.9029,24.1737 L26.1939,21.9789 L28.5894,19.8985 L31.0835,17.9375 L70,70 Z" />
+            <Path className="chartFill8" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M31.0835,17.9375 L33.7005,16.0802 L36.4061,14.3543 L39.1935,12.764 L42.056,11.3133 L44.9867,10.0056 L47.9783,8.8441 L51.0235,7.8317 L54.1151,6.9709 L57.2454,6.2637 L60.4067,5.7118 L63.5915,5.3167 L66.7918,5.0792 L70,5 L70,70 Z" />
+            <Path className="chartFill0" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,27 C164,29.7614 161.7614,32 159,32 C156.2386,32 154,29.7614 154,27 C154,24.2386 156.2386,22 159,22 C161.7614,22 164,24.2386 164,27 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="22px" width="14.125px" textAlign="left" fontSize="10px">A</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,40 C164,42.7614 161.7614,45 159,45 C156.2386,45 154,42.7614 154,40 C154,37.2386 156.2386,35 159,35 C161.7614,35 164,37.2386 164,40 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="35px" width="14.125px" textAlign="left" fontSize="10px">B</Label>
+            <Path className="chartFill2" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,53 C164,55.7614 161.7614,58 159,58 C156.2386,58 154,55.7614 154,53 C154,50.2386 156.2386,48 159,48 C161.7614,48 164,50.2386 164,53 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="48px" width="14.125px" textAlign="left" fontSize="10px">C</Label>
+            <Path className="chartFill3" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,66 C164,68.7614 161.7614,71 159,71 C156.2386,71 154,68.7614 154,66 C154,63.2386 156.2386,61 159,61 C161.7614,61 164,63.2386 164,66 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="61px" width="14.125px" textAlign="left" fontSize="10px">D</Label>
+            <Path className="chartFill4" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,79 C164,81.7614 161.7614,84 159,84 C156.2386,84 154,81.7614 154,79 C154,76.2386 156.2386,74 159,74 C161.7614,74 164,76.2386 164,79 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="74px" width="14.125px" textAlign="left" fontSize="10px">E</Label>
+            <Path className="chartFill5" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,92 C164,94.7614 161.7614,97 159,97 C156.2386,97 154,94.7614 154,92 C154,89.2386 156.2386,87 159,87 C161.7614,87 164,89.2386 164,92 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="87px" width="14.125px" textAlign="left" fontSize="10px">F</Label>
+            <Path className="chartFill6" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,105 C164,107.7614 161.7614,110 159,110 C156.2386,110 154,107.7614 154,105 C154,102.2386 156.2386,100 159,100 C161.7614,100 164,102.2386 164,105 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="100px" width="14.125px" textAlign="left" fontSize="10px">G</Label>
+            <Path className="chartFill7" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,118 C164,120.7614 161.7614,123 159,123 C156.2386,123 154,120.7614 154,118 C154,115.2386 156.2386,113 159,113 C161.7614,113 164,115.2386 164,118 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="113px" width="14.125px" textAlign="left" fontSize="10px">H</Label>
+            <Path className="chartFill8" position="absolute" left="0px" top="0px" width="183.125px" height="141px" viewBox="0 0 183.125 141" stroke="none" d="M164,131 C164,133.7614 161.7614,136 159,136 C156.2386,136 154,133.7614 154,131 C154,128.2386 156.2386,126 159,126 C161.7614,126 164,128.2386 164,131 Z" />
+            <Label className="chartLabel" position="absolute" left="169px" top="126px" width="14.125px" textAlign="left" fontSize="10px">I</Label>
+            <Label className="chartTitle" position="absolute" left="153px" top="5px" width="13.15px" textAlign="left" fontSize="11px" fontWeight="bold">a</Label>
+          </View>
+        </View>
+          <Label className="caption">52 piirtokomentoa · pie.vg.json</Label>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default render;