From 2858415ac52237d0296e224032950779c76488ff Mon Sep 17 00:00:00 2001
From: Wolfr <johan.ronsse@gmail.com>
Date: Sat, 22 May 2021 14:46:25 +0200
Subject: [PATCH] Add example page for 2 charts

Signed-off-by: Wolfr <johan.ronsse@gmail.com>
---
 src/lib/jui-components/BarChart.svelte        | 77 +++++++++++++++++++
 src/lib/jui-components/LineAreaChart.svelte   | 43 +++++++++++
 src/routes/styleguide/__layout.svelte         |  8 ++
 .../styleguide/components/bar-chart.svelte    | 18 +++++
 .../components/line-area-chart.svelte         | 18 +++++
 5 files changed, 164 insertions(+)
 create mode 100644 src/lib/jui-components/BarChart.svelte
 create mode 100644 src/lib/jui-components/LineAreaChart.svelte
 create mode 100644 src/routes/styleguide/components/bar-chart.svelte
 create mode 100644 src/routes/styleguide/components/line-area-chart.svelte

diff --git a/src/lib/jui-components/BarChart.svelte b/src/lib/jui-components/BarChart.svelte
new file mode 100644
index 0000000..6e28c64
--- /dev/null
+++ b/src/lib/jui-components/BarChart.svelte
@@ -0,0 +1,77 @@
+<script>
+  import { LayerCake, Svg } from 'layercake';
+  import { scaleBand } from 'd3-scale';
+
+  import Bar from '$lib/layercake-components/Bar.svelte';
+  import AxisX from '$lib/layercake-components/AxisX.svelte';
+  import AxisY from '$lib/layercake-components/AxisY.svelte';
+
+  let data = [
+      {
+        year: 1979,
+        value: 2
+      },
+      {
+        year: 1980,
+        value: 3
+      },
+      {
+        year: 1981,
+        value: 5
+      },
+      {
+        year: 1982,
+        value: 8
+      },
+      {
+        year: 1983,
+        value: 18
+      }
+    ];
+
+  const xKey = 'value';
+  const yKey = 'year';
+
+  data.forEach(d => {
+    d[xKey] = +d[xKey];
+  });
+</script>
+
+<style>
+  /*
+    The wrapper div needs to have an explicit width and height in CSS.
+    It can also be a flexbox child or CSS grid element.
+    The point being it needs dimensions since the <LayerCake> element will
+    expand to fill it.
+  */
+
+  .chart-container {
+    width: 100%;
+    height: 500px;
+    font-family: sans-serif;
+  }
+</style>
+
+<div class="chart-container">
+  <LayerCake
+    padding={{ top: 0, bottom: 20, left: 35 }}
+    x={xKey}
+    y={yKey}
+    yScale={scaleBand().paddingInner([0.05]).round(true)}
+    yDomain={['1979', '1980', '1981', '1982', '1983']}
+    xDomain={[0, null]}
+    data={data}
+  >
+    <Svg>
+      <AxisX
+        gridlines={true}
+        baseline={true}
+        snapTicks={true}
+      />
+      <AxisY
+        gridlines={false}
+      />
+      <Bar/>
+    </Svg>
+  </LayerCake>
+</div>
\ No newline at end of file
diff --git a/src/lib/jui-components/LineAreaChart.svelte b/src/lib/jui-components/LineAreaChart.svelte
new file mode 100644
index 0000000..a0c587f
--- /dev/null
+++ b/src/lib/jui-components/LineAreaChart.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { LayerCake, Svg, Html, Canvas } from 'layercake';
+
+  import AxisX from '$lib/layercake-components/AxisX.svelte';
+  import AxisY from '$lib/layercake-components/AxisY.svelte';
+  import Line from '$lib/layercake-components/Line.svelte';
+
+  const data = [
+    { x: 1, y: 1 },
+    { x: 2, y: 3 },
+    { x: 3, y: 3 },
+    { x: 5, y: 4 },
+    { x: 6, y: 5 },
+    { x: 7, y: 6 },
+    { x: 8, y: 7 },
+  ];
+</script>
+
+<style>
+  /* Set dimensions on the parent.
+     The <LayerCake> component will expand to fill it.
+   */
+  .chart-container {
+    width: 100%;
+    height: 500px;
+    font-family: sans-serif;
+  }
+</style>
+
+<div class="chart-container">
+  <LayerCake padding={{ right: 10, bottom: 20, left: 35 }}
+    x='x'
+    y='y'
+    {data}
+  >
+  <AxisX />
+    <Svg>
+      <AxisX ticks={10} />
+      <AxisY ticks={10} />
+      <Line color='#f0c'/>
+    </Svg>
+  </LayerCake>
+</div>
diff --git a/src/routes/styleguide/__layout.svelte b/src/routes/styleguide/__layout.svelte
index ddd55e7..a754390 100644
--- a/src/routes/styleguide/__layout.svelte
+++ b/src/routes/styleguide/__layout.svelte
@@ -72,6 +72,10 @@
       url: 'badge',
       category: 'components'
     },
+    {
+      url: 'bar-chart',
+      category: 'components'
+    },
     {
       url: 'bordered-list',
       category: 'components'
@@ -133,6 +137,10 @@
       url: 'list',
       category: 'components'
     },
+    {
+      url: 'line-area-chart',
+      category: 'components'
+    },
     {
       url: 'pagination',
       category: 'components'
diff --git a/src/routes/styleguide/components/bar-chart.svelte b/src/routes/styleguide/components/bar-chart.svelte
new file mode 100644
index 0000000..6196567
--- /dev/null
+++ b/src/routes/styleguide/components/bar-chart.svelte
@@ -0,0 +1,18 @@
+<script>
+  import StyleguideIntro from '$lib/jui-components/StyleguideIntro.svelte';
+  import StyleguideCard from '$lib/jui-components/StyleguideCard.svelte';
+  import BarChart from '$lib/jui-components/BarChart.svelte';
+
+  let pageTitle = 'Bar chart';
+
+</script>
+
+<svelte:head>
+  <title>{pageTitle} - Components - JUI</title>
+</svelte:head>
+
+<StyleguideIntro title={pageTitle} />
+
+<StyleguideCard title="Bar chart">
+  <BarChart />
+</StyleguideCard>
diff --git a/src/routes/styleguide/components/line-area-chart.svelte b/src/routes/styleguide/components/line-area-chart.svelte
new file mode 100644
index 0000000..f3df529
--- /dev/null
+++ b/src/routes/styleguide/components/line-area-chart.svelte
@@ -0,0 +1,18 @@
+<script>
+  import StyleguideIntro from '$lib/jui-components/StyleguideIntro.svelte';
+  import StyleguideCard from '$lib/jui-components/StyleguideCard.svelte';
+  import LineAreaChart from '$lib/jui-components/LineAreaChart.svelte';
+
+  let pageTitle = 'Line/area chart';
+
+</script>
+
+<svelte:head>
+  <title>{pageTitle} - Components - JUI</title>
+</svelte:head>
+
+<StyleguideIntro title={pageTitle} />
+
+<StyleguideCard title="Line/area chart">
+  <LineAreaChart />
+</StyleguideCard>