Merge pull request #41 from sgratzl/release/v3.9.1

Release v3.9.1
sgratzl · Aug 27, 2022 · 5ca3914 · 5ca3914
2 parents 0a02a17 + 8d0ec0d
commit 5ca3914
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sgratzl/chartjs-chart-boxplot",
   "description": "Chart.js module for charting boxplots and violin charts",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "publishConfig": {
     "access": "public"
   },

diff --git a/samples/boxplot_and_violin.html b/samples/boxplot_and_violin.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Box Plot Chart</title>
+    <script src="https://unpkg.com/[email protected]/dist/chart.js"></script>
+    <script src="../build/index.umd.js"></script>
+  </head>
+
+  <body>
+    <div id="container" style="width: 75%">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script>
+      const boxplotData = {
+        labels: ['toto'],
+        datasets: [
+          {
+            type: 'violin',
+            data: [
+              {
+                median: 50,
+                maxEstimate: 10,
+                coords: [
+                  { v: 0, estimate: 0 },
+                  { v: 25, estimate: 10 },
+                  { v: 50, estimate: 3 },
+                  { v: 75, estimate: 7 },
+                  { v: 100, estimate: 0 },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'boxplot',
+            data: [
+              {
+                min: 0,
+                max: 100,
+                q1: 25,
+                q3: 75,
+                median: 50,
+                mean: 50,
+                items: [],
+                outliers: [],
+              },
+            ],
+          },
+        ],
+      };
+      window.onload = () => {
+        const ctx = document.getElementById('canvas').getContext('2d');
+        window.myBar = new Chart(ctx, {
+          data: boxplotData,
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/samples/violin_empty.html b/samples/violin_empty.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Violin Chart</title>
+    <script src="https://unpkg.com/[email protected]/dist/chart.js"></script>
+    <script src="../build/index.umd.js"></script>
+    <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
+    <script src="./utils.js"></script>
+  </head>
+
+  <body>
+    <div id="container" style="width: 75%">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script>
+      const samples = this.Samples.utils;
+      const color = Chart.helpers.color;
+      const b = d3.randomNormal();
+      const random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
+      const boxplotData = {
+        labels: samples.months({ count: 8 }),
+        datasets: [
+          {
+            label: 'Dataset 1',
+            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+            borderColor: window.chartColors.red,
+            borderWidth: 1,
+            data: [[null], samples.boxplotsArray({ count: 7, random: random, points: 200 })].flat(),
+          },
+        ],
+      };
+
+      window.onload = function () {
+        const ctx = document.getElementById('canvas').getContext('2d');
+        const myBar = new Chart(ctx, {
+          type: 'violin',
+          data: boxplotData,
+          options: {
+            responsive: true,
+            legend: {
+              position: 'top',
+            },
+            title: {
+              display: true,
+              text: 'Chart.js Violin Chart',
+            },
+          },
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/...rollers/__image_snapshots__/violin-controller-spec-ts-violin-default-1-snap.png b/...rollers/__image_snapshots__/violin-controller-spec-ts-violin-default-1-snap.png
diff --git a/src/elements/Violin.ts b/src/elements/Violin.ts
@@ -8,8 +8,9 @@ export type IViolinElementOptions = IStatsBaseOptions;
 export interface IViolinElementProps extends IStatsBaseProps {
   min: number;
   max: number;
+  median: number;
   coords: IKDEPoint[];
-  maxEstimate: number;
+  maxEstimate?: number;
 }
 
 export class Violin extends StatsBase<IViolinElementProps, IViolinElementOptions> {
@@ -20,18 +21,21 @@ export class Violin extends StatsBase<IViolinElementProps, IViolinElementOptions
     ctx.strokeStyle = this.options.borderColor;
     ctx.lineWidth = this.options.borderWidth;
 
-    const props = this.getProps(['x', 'y', 'width', 'height', 'min', 'max', 'coords', 'maxEstimate']);
+    const props = this.getProps(['x', 'y', 'median', 'width', 'height', 'min', 'max', 'coords', 'maxEstimate']);
 
-    drawPoint(
-      ctx,
-      {
-        pointStyle: 'rectRot',
-        radius: 5,
-        borderWidth: this.options.borderWidth,
-      },
-      props.x,
-      props.y
-    );
+    if (props.median != null) {
+      // draw median dot
+      drawPoint(
+        ctx,
+        {
+          pointStyle: 'rectRot',
+          radius: 5,
+          borderWidth: this.options.borderWidth,
+        },
+        props.x,
+        props.y
+      );
+    }
 
     if (props.coords && props.coords.length > 0) {
       this._drawCoords(ctx, props);
@@ -48,10 +52,15 @@ export class Violin extends StatsBase<IViolinElementProps, IViolinElementOptions
     ctx: CanvasRenderingContext2D,
     props: Pick<IViolinElementProps, 'x' | 'coords' | 'y' | 'maxEstimate' | 'width' | 'height' | 'min' | 'max'>
   ): void {
-    ctx.beginPath();
+    let maxEstimate: number;
+    if (props.maxEstimate == null) {
+      maxEstimate = props.coords.reduce((a, d) => Math.max(a, d.estimate), Number.NEGATIVE_INFINITY);
+    } else {
+      maxEstimate = props.maxEstimate;
+    }
     if (this.isVertical()) {
       const { x, width } = props;
-      const factor = width / 2 / props.maxEstimate;
+      const factor = width / 2 / maxEstimate;
       ctx.moveTo(x, props.min);
       props.coords.forEach((c) => {
         ctx.lineTo(x - c.estimate * factor, c.v);
@@ -64,7 +73,7 @@ export class Violin extends StatsBase<IViolinElementProps, IViolinElementOptions
       ctx.lineTo(x, props.max);
     } else {
       const { y, height } = props;
-      const factor = height / 2 / props.maxEstimate;
+      const factor = height / 2 / maxEstimate;
       ctx.moveTo(props.min, y);
       props.coords.forEach((c) => {
         ctx.lineTo(c.v, y - c.estimate * factor);

diff --git a/src/elements/base.ts b/src/elements/base.ts
@@ -219,10 +219,12 @@ export interface IStatsBaseProps {
   height: number;
   items: number[];
   outliers: number[];
-  mean: number;
 }
 
-export class StatsBase<T extends IStatsBaseProps, O extends IStatsBaseOptions> extends Element<T, O> {
+export class StatsBase<T extends IStatsBaseProps & { mean?: number }, O extends IStatsBaseOptions> extends Element<
+  T,
+  O
+> {
   declare _datasetIndex: number;
 
   declare horizontal: boolean;