Complete bar chart example

Author: jimjam-slam

docs/examples/barchart/BarChart.svelte

@@ -2,28 +2,71 @@
   // let's borrow svelte's fly transitions for the circles that need to be
   // created or destroyed
   // https://svelte.dev/tutorial/transition
-  // import { fly } from "svelte/transition";
+  import { fly } from "svelte/transition";
 
   // here we declare `data` as a prop that this component can expect
   // https://svelte.dev/tutorial/declaring-props
-  // export let data;
+  // in this case we're expecting an array of up to 5 numbers as `data` and
+  // the max chart height as `height`
+  export let data =  [50, 45, 15, 25, 30];
+  export let height = 100;
+  export let width = 400;
+  export let barWidth = 25;
+  export let barColor = "black"
 
   // prefix a statement with $: to make it reactive (so it runs every time
   // data changes)
   // https://svelte.dev/tutorial/reactive-statements
-  // $: console.log("Dataset prop:", data);
+  // here we're going to normalise our data to 100
+  $: normalisedData = data.map(d => ({
+    y: d,
+    h: d / Math.max(...data) * height
+  }));
+  $: console.log(normalisedData);
 
 </script>
 
 <style>
-  svg text {
-    fill: red;
+  @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300&display=swap');
+
+  text {
+    font-family: "Public Sans";
+    font-size: smaller;
   }
 </style>
 
-<!-- we use svelte's in/out transitions for entering and leaving dom elements,
-     and vanilla css transitions for retained elements that change. the
-     #each block means we create an svg <circle> for each element of data -->
-<svg>
-  <text x="50" y="50">Hello world!</text>
+<!-- this bar chart's pretty simple: just bars and labels,
+     with a single, unlabelled baseline.
+     it does, however, use the `height`, `width` and `barWidth`
+     props to scale the element sizes, so this can be dynamically
+     resized easily -->
+
+<svg width={width} height={height}>
+  <!-- for each data element, draw a rectangle and a label -->
+  {#each normalisedData as d, i (i)}
+  <rect
+    in:fly="{{x: 10}}" out:fly="{{x: 10}}"
+    style={"transition: all 1s ease-out"}
+    x="{width / 6 * (i + 0.5) - (barWidth / 2)}px"
+    y="{height - d.h}px"
+    width="{barWidth}px"
+    height="{d.h}px"
+    fill="{barColor}"
+    >
+  </rect>
+    <!-- place label either above or below bar,
+         depending on its height -->
+    <text
+      in:fly="{{x: 10}}" out:fly="{{x: 10}}"
+      style={"transition: all 1s ease-out"}
+      text-anchor="middle"
+      x="{width / 6 * (i + 0.5)}px"
+      y="{d.h > 35 ?
+        height - d.h + 16 :
+        height - d.h - 6}px"
+      fill="{d.h > 35 ? "white" : barColor}"
+    >{d.y}</text>
+  {/each}
+  <!-- and a single x axis baseline -->
+  <line x1="0" x2="{width * 5 / 6}" y1="{height}" y2="{height}" stroke="black"></line>
 </svg>

docs/examples/barchart/index.qmd

@@ -1,5 +1,5 @@
 ---
-title: "Examples: barchart"
+title: "Examples: basic barchart"
 author: James Goldie, 360info
 date: last-modified
 ---
@@ -8,16 +8,91 @@ date: last-modified
 {{< include /.sverto/examples/barchart/index.qmd >}}
 :::
 
-Let's start with a barchart.
+Let's start with a simple barchart.
+
+This isn't going to be one of those barcharts you've seen on TV, what with tick marks and hover effects and such. This one's just some bars, some labels and a baseline. It will, however, come with some useful features to help us reuse it.
+
+::::: {.columns .column-page}
+
+# Try it out
+
+::::{.column width="40%"}
+
+The following code initialises our bar chart.
 
 ```{ojs}
-BarChart = import_svelte("BarChart.svelte")
+//| code-fold: true
+
+BarChart =
+  import_svelte("BarChart.svelte")
+
 myBarChart = new BarChart.default({
-  target: document.querySelector("#mybarchart")
+  target: document.querySelector("#mybarchart"),
+  props: {
+    data: [5, 5, 5, 5, 5],
+    height: 200,
+    width: 200,
+    barWidth: 25,
+    barColor: "#36a7e9"
+  }
 });
 ```
 
 :::{#mybarchart}
 :::
 
-There it is!
+[See the bar chart source at [BarChart.svelte](./BarChart.svelte)]{style="font-size: smaller; font-color: #999999"}
+
+::::
+
+<!-- TODO - .svelte file content here? -->
+
+::::{.column width="5%"}
+::::
+
+
+::::{.column width="45%"}
+This Svelte component accepts a few props:
+
+* `data`: a simple array of (up to) 5 numbers
+* `height`: the height of the chart in pixels
+* `width`: the width of the chart in pixels
+* `barWidth`: the width of each bar
+* `barColor`: the colour of the bars and labels (note the US spelling here)
+
+We can hook any of those values up to OJS code using `myBarChart.propName`.
+
+For example, let's make the data user-configurable:
+
+```{ojs}
+//| code-fold: true
+
+viewof userData = Inputs.form([
+  Inputs.text({type: "number", value: 25, width: 20}),
+  Inputs.text({type: "number", value: 35, width: 20}),
+  Inputs.text({type: "number", value: 65, width: 20}),
+  Inputs.text({type: "number", value: 5, width: 20}),
+  Inputs.text({type: "number", value: 50, width: 20})
+]);
+myBarChart.data = [...userData];
+```
+
+Or the colour:
+
+```{ojs}
+//| code-fold: true
+viewof userColor = Inputs.color({value: "#36a7e9"});
+myBarChart.barColor = userColor;
+```
+::::
+
+:::::
+
+## Challenges
+
+This Svelte component's pretty basic, though. What else is it missing?
+
+* The height and width are configurable, and the bars resize in response to them, but their CSS transitions are slow to catch up. Ideally we'd have the bars apply the transition when they resize because of a change in data but _not_ in response to a change in chart height or width.
+* We have no axes other than the baseline. That's fine for a lot of uses, but we might want to add those elements for other uses.
+  - We could add those elements manually, but the [`d3-axis`](https://github.com/d3/d3-axis) package has some helpers for creating axes quickly!
+* The bars are all the same colour. We could write a function that converts each bar's data value to a colour, and use it for the `<rect>` `fill` attribute, but the [`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic) also has some helpers to do this quickly!