docs: sandboxes (#1349)

README.md

@@ -47,6 +47,8 @@ That's why we started Chartist and our goal is to solve all of the above issues.
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="#whats-new-in-v1">What's new in v1?</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#examples">Examples</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="#contribution">Contribution</a>
 <hr />
 
@@ -158,6 +160,57 @@ import type {
 
 </details>
 
+## Examples
+
+<details>
+  <summary>Bar Chart</summary>
+
+- [Bi-polar bar chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/bi-polar-interpolated)
+- [Distributed series](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/distributed-series)
+- [Extreme responsive configuration](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/extreme-responsive)
+- [Horizontal bar chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/horizontal)
+- [Label placement](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/label-position)
+- [Multi-line labels](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/multiline)
+- [Overlapping bars on mobile](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/overlapping-bars)
+- [Stacked bar chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/stacked)
+- [Add peak circles using the draw events](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/bar/with-circle-modify-drawing)
+
+</details>
+
+<details>
+  <summary>Line Chart</summary>
+
+- [Line chart with area](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/area)
+- [Auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/axis-auto)
+- [Fixed and auto scale axis](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/axis-fixed-and-auto)
+- [Bi-polar Line chart with area only](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/bipolar-area)
+- [Filled holes in data](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/data-fill-holes)
+- [Holes in data](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/data-holes)
+- [Using events to replace graphics](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/modify-drawing)
+- [Only whole numbers](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/only-integer)
+- [SVG Path animation](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/path-animation)
+- [Line scatter diagram with responsive settings](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/scatter-random)
+- [Series Overrides](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/series-override)
+- [Simple line chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/simple)
+- [Simple responsive options](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/simple-responsive)
+- [Line Interpolation / Smoothing](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/simple-smoothing)
+- [Simple SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/simple-svg-animation)
+- [Advanced SMIL Animations](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/svg-animation)
+- [Timeseries](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/line/timeseries)
+
+</details>
+
+<details>
+  <summary>Pie Chart</summary>
+
+- [Pie chart with custom labels](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/pie/custom-labels)
+- [Animating a Donut with Svg.animate](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/pie/donut-animation)
+- [Donut chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/pie/donut-chart)
+- [Simple pie chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/pie/simple)
+- [Gauge chart](http://codesandbox.io/s/github/chartist-js/chartist/master/sandboxes/pie/simple-gauge)
+
+</details>
+
 ## Plugins
 
 Coming soon.

package.json

@@ -70,8 +70,8 @@
     "test:unit": "jest -c jest.config.json ./src",
     "test:storyshots": "jest -c jest.config.json ./test/storyshots.spec.js",
     "test": "pnpm lint && pnpm test:unit",
-    "lint": "eslint './*.{js,ts,cjs}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts,cjs}'",
-    "format": "prettier --write './*.{js,ts}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts}'",
+    "lint": "eslint './*.{js,ts,cjs}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts,cjs}' 'sandboxes/**/*.{js,ts}'",
+    "format": "prettier --write './*.{js,ts}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{cjs,js,ts}' 'sandboxes/**/*.{js,ts}'",
     "commit": "cz",
     "bumpVersion": "standard-version",
     "createGithubRelease": "simple-github-release",

sandboxes/bar/bi-polar-interpolated/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>

sandboxes/bar/bi-polar-interpolated/index.ts

@@ -0,0 +1,19 @@
+import 'chartist/dist/index.css';
+import { BarChart, BarChartOptions } from 'chartist';
+
+const data = {
+  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
+  series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
+};
+
+const options: BarChartOptions = {
+  high: 10,
+  low: -10,
+  axisX: {
+    labelInterpolationFnc(value, index) {
+      return index % 2 === 0 ? value : null;
+    }
+  }
+};
+
+new BarChart('#chart', data, options);

sandboxes/bar/bi-polar-interpolated/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bar-bi-polar-interpolated",
+  "description": "Bi-polar bar chart",
+  "main": "index.ts",
+  "dependencies": {
+    "chartist": "^1.0.0"
+  }
+}

sandboxes/bar/bi-polar-interpolated/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": true,
+  "view": "browser",
+  "template": "parcel"
+}

sandboxes/bar/distributed-series/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>

sandboxes/bar/distributed-series/index.ts

@@ -0,0 +1,13 @@
+import 'chartist/dist/index.css';
+import { BarChart } from 'chartist';
+
+new BarChart(
+  '#chart',
+  {
+    labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
+    series: [20, 60, 120, 200, 180, 20, 10]
+  },
+  {
+    distributeSeries: true
+  }
+);

sandboxes/bar/distributed-series/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bar-distributed-series",
+  "description": "Distributed series",
+  "main": "index.ts",
+  "dependencies": {
+    "chartist": "^1.0.0"
+  }
+}

sandboxes/bar/distributed-series/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": true,
+  "view": "browser",
+  "template": "parcel"
+}

sandboxes/bar/extreme-responsive/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>

sandboxes/bar/extreme-responsive/index.ts

@@ -0,0 +1,63 @@
+import 'chartist/dist/index.css';
+import { BarChart, noop } from 'chartist';
+
+new BarChart(
+  '#chart',
+  {
+    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
+    series: [
+      [5, 4, 3, 7],
+      [3, 2, 9, 5],
+      [1, 5, 8, 4],
+      [2, 3, 4, 6],
+      [4, 1, 2, 1]
+    ]
+  },
+  {
+    // Default mobile configuration
+    stackBars: true,
+    axisX: {
+      labelInterpolationFnc: value =>
+        String(value)
+          .split(/\s+/)
+          .map(word => word[0])
+          .join('')
+    },
+    axisY: {
+      offset: 20
+    }
+  },
+  [
+    // Options override for media > 400px
+    [
+      'screen and (min-width: 400px)',
+      {
+        reverseData: true,
+        horizontalBars: true,
+        axisX: {
+          labelInterpolationFnc: noop
+        },
+        axisY: {
+          offset: 60
+        }
+      }
+    ],
+    // Options override for media > 800px
+    [
+      'screen and (min-width: 800px)',
+      {
+        stackBars: false,
+        seriesBarDistance: 10
+      }
+    ],
+    // Options override for media > 1000px
+    [
+      'screen and (min-width: 1000px)',
+      {
+        reverseData: false,
+        horizontalBars: false,
+        seriesBarDistance: 15
+      }
+    ]
+  ]
+);

sandboxes/bar/extreme-responsive/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bar-extreme-responsive",
+  "description": "Extreme responsive configuration",
+  "main": "index.ts",
+  "dependencies": {
+    "chartist": "^1.0.0"
+  }
+}

sandboxes/bar/extreme-responsive/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": true,
+  "view": "browser",
+  "template": "parcel"
+}

sandboxes/bar/horizontal/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>

sandboxes/bar/horizontal/index.ts

@@ -0,0 +1,29 @@
+import 'chartist/dist/index.css';
+import { BarChart } from 'chartist';
+
+new BarChart(
+  '#chart',
+  {
+    labels: [
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+      'Sunday'
+    ],
+    series: [
+      [5, 4, 3, 7, 5, 10, 3],
+      [3, 2, 9, 5, 4, 6, 4]
+    ]
+  },
+  {
+    seriesBarDistance: 10,
+    reverseData: true,
+    horizontalBars: true,
+    axisY: {
+      offset: 70
+    }
+  }
+);

sandboxes/bar/horizontal/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bar-horizontal",
+  "description": "Horizontal bar chart",
+  "main": "index.ts",
+  "dependencies": {
+    "chartist": "^1.0.0"
+  }
+}

sandboxes/bar/horizontal/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": true,
+  "view": "browser",
+  "template": "parcel"
+}

sandboxes/bar/label-position/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>

sandboxes/bar/label-position/index.ts

@@ -0,0 +1,23 @@
+import 'chartist/dist/index.css';
+import { BarChart } from 'chartist';
+
+new BarChart(
+  '#chart',
+  {
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    series: [
+      [5, 4, 3, 7, 5, 10, 3],
+      [3, 2, 9, 5, 4, 6, 4]
+    ]
+  },
+  {
+    axisX: {
+      // On the x-axis start means top and end means bottom
+      position: 'start'
+    },
+    axisY: {
+      // On the y-axis start means left and end means right
+      position: 'end'
+    }
+  }
+);

sandboxes/bar/label-position/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bar-label-position",
+  "description": "Label placement",
+  "main": "index.ts",
+  "dependencies": {
+    "chartist": "^1.0.0"
+  }
+}

sandboxes/bar/label-position/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": true,
+  "view": "browser",
+  "template": "parcel"
+}

sandboxes/bar/multiline/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="./index.ts"></script>
+  </head>
+  <body>
+    <div id="chart" style="height: 50vh"></div>
+  </body>
+</html>