optional options; updat example page

timqian · Nov 22, 2019 · cef9ba2 · cef9ba2
1 parent 10c5d0e
commit cef9ba2
Show file tree

Hide file tree

Showing 14 changed files with 167 additions and 252 deletions.
diff --git a/examples/npm/index.html → examples/example.html b/examples/npm/index.html → examples/example.html
@@ -1,9 +1,12 @@
-<html style="background-color:black;">
+<html>
     <head>
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
     </head>
-  <body>
+  <body>    
+    <h1><a href="https://github.com/timqian/chart.xkcd/tree/master/examples">Source code of the examples</a></h1>
+    <br/>
+
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="bar-chart"></svg></div>
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="pie-chart"></svg></div>
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="line-chart"></svg></div>
@@ -12,6 +15,7 @@
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="radar-chart"></svg></div>
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="line-chart-cus"></svg></div>
     <div style="width: 400px; height: 300px; display: inline-block;"><svg class="line-chart-unxkcdify"></svg></div>
+    <div style="width: 400px; height: 300px; display: inline-block;"><svg class="line-chart-dark"></svg></div>
 
     <script src="./index.js"></script>
   </body>

diff --git a/examples/npm/index.js → examples/index.js b/examples/npm/index.js → examples/index.js
@@ -1,6 +1,6 @@
 // import chartXkcd from 'chart.xkcd';
 // import chartXkcd from '../../dist/chart.xkcd';
-import chartXkcd from '../../src';
+import chartXkcd from '../src';
 
 const svg = document.querySelector('.bar-chart');
 
@@ -14,12 +14,12 @@ new chartXkcd.Bar(svg, {
       data: [100, 2],
     }],
   },
-  options: {
-    yTickCount: 2,
-    // unxkcdify: true,
-    // strokeColor: 'white',
-    // backgroundColor: 'black',
-  },
+  // options: {
+  //   yTickCount: 2,
+  //   // unxkcdify: true,
+  //   // strokeColor: 'white',
+  //   // backgroundColor: 'black',
+  // },
 });
 
 const svgPie = document.querySelector('.pie-chart');
@@ -35,8 +35,8 @@ new chartXkcd.Pie(svgPie, {
     innerRadius: 0.6,
     legendPosition: chartXkcd.config.positionType.upRight,
     // unxkcdify: true,
-    strokeColor: 'white',
-    backgroundColor: 'black',
+    // strokeColor: 'white',
+    // backgroundColor: 'black',
   },
 });
 
@@ -57,8 +57,8 @@ new chartXkcd.Line(svgLine, {
   },
   options: {
     // unxkcdify: true,
-    strokeColor: 'black',
-    backgroundColor: 'white',
+    // strokeColor: 'black',
+    // backgroundColor: 'white',
   },
 });
 
@@ -82,8 +82,8 @@ new chartXkcd.XY(svgXY, {
     legendPosition: chartXkcd.config.positionType.downRight,
     showLine: false,
     // unxkcdify: true,
-    strokeColor: 'white',
-    backgroundColor: 'black',
+    // strokeColor: 'blue',
+    // backgroundColor: 'black',
 
   },
 });
@@ -110,8 +110,8 @@ new chartXkcd.XY(svgXY2, {
     timeFormat: 'MM/DD/YYYY',
     dotSize: 0.5,
     // unxkcdify: true,
-    strokeColor: 'white',
-    backgroundColor: 'black',
+    // strokeColor: 'white',
+    // backgroundColor: 'black',
   },
 });
 
@@ -134,8 +134,8 @@ new chartXkcd.Radar(svgRadar, {
     showLabels: true,
     legendPosition: chartXkcd.config.positionType.upRight,
     // unxkcdify: true,
-    strokeColor: 'white',
-    backgroundColor: 'black',
+    // strokeColor: 'white',
+    // backgroundColor: 'black',
   },
 });
 
@@ -158,8 +158,8 @@ new chartXkcd.Line(svgLineCus, {
     fontFamily: 'ZCOOL KuaiLe',
     dataColors: ['black', '#aaa'],
     legendPosition: chartXkcd.config.positionType.upRight,
-    strokeColor: 'white',
-    backgroundColor: 'black',
+    // strokeColor: 'white',
+    // backgroundColor: 'black',
   },
 });
 
@@ -181,7 +181,33 @@ new chartXkcd.Line(svgLineUnxkcdify, {
   },
   options: {
     unxkcdify: true,
+    // strokeColor: 'white',
+    // backgroundColor: 'black',
+  },
+});
+
+const svgDark = document.querySelector('.line-chart-dark');
+new chartXkcd.XY(svgDark, {
+  title: 'stars',
+  xLabel: 'wo',
+  yLabel: 'Stars count',
+  data: {
+    datasets: [{
+      label: 'timqian',
+      data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 180 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
+    }, {
+      label: 'wewean',
+      data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
+    }],
+  },
+  options: {
+    xTickCount: 5,
+    yTickCount: 5,
+    legendPosition: chartXkcd.config.positionType.downRight,
+    showLine: false,
+    // unxkcdify: true,
     strokeColor: 'white',
     backgroundColor: 'black',
+
   },
-});
+});
diff --git a/examples/npm/package-lock.json → examples/package-lock.json b/examples/npm/package-lock.json → examples/package-lock.json
diff --git a/examples/npm/package.json → examples/package.json b/examples/npm/package.json → examples/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "parcel index.html"
+    "start": "parcel example.html"
   },
   "dependencies": {
     "chart.xkcd": "^1.0.5"

diff --git a/examples/readme.md b/examples/readme.md
@@ -1,12 +1,4 @@
 ## chart.xkcd usage examples
 
-### via npm
-
-1. enter the `npm` dir
-2. `npm install`
-3. `npm start`
-
-### via script tag
-
-1. enter `script-tag` dir
-2. open `index.html` in the browser
+1. `npm install`
+2. `npm start`
diff --git a/examples/script-tag/index.html b/examples/script-tag/index.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chart.xkcd",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "xkcd style chart lib",
   "jsdelivr": "dist/chart.xkcd.min.js",
   "unpkg": "dist/chart.xkcd.min.js",
@@ -11,10 +11,11 @@
   "scripts": {
     "buildUmd": "parcel build src/index.js --target browser --out-file chart.xkcd.min.js --no-source-maps --experimental-scope-hoisting --global chartXkcd",
     "build": "parcel build src/index.js --target node --bundle-node-modules --no-source-maps --experimental-scope-hoisting",
-    "start": "parcel examples/npm/index.html",
+    "start": "parcel examples/example.html",
     "prepublishOnly": "rm -rf dist && npm run buildUmd && npm run build",
     "genDoc": "~/go/bin/static-docs --in docs --out docs-dist --title Chart.xkcd --subtitle 'xkcd styled chart lib'",
-    "deployDoc": "gh-pages -d docs-dist",
+    "genExample": "parcel build examples/example.html --out-dir docs-dist --public-url /chart.xkcd",
+    "deployDoc": "npm run genDoc && npm run genExample && gh-pages -d docs-dist",
     "lint": "./node_modules/.bin/eslint ./src"
   },
   "repository": {

diff --git a/readme.md b/readme.md
@@ -6,7 +6,11 @@
 
 Chart.xkcd is a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
 
-Check out the [documentation](https://timqian.com/chart.xkcd/) for more instructions and links, or try out the [examples](./examples), or chat with us in [Slack](https://join.slack.com/t/t9tio/shared_invite/enQtNjgzMzkwMDM0NTE3LTE5ZTUzYjU4Y2I0YzRiZjNkYTkzMzE1ZmM0NDdmYzRlZmMxNGY1MzZlN2EwYjYyNWVlMWY0Nzk2MDBhNWZlY2I)
+Check out the [documentation](https://timqian.com/chart.xkcd/) for more instructions and links, or try out the [examples](https://timqian.com/chart.xkcd/example.html), or chat with us in [Slack](https://join.slack.com/t/t9tio/shared_invite/enQtNjgzMzkwMDM0NTE3LTE5ZTUzYjU4Y2I0YzRiZjNkYTkzMzE1ZmM0NDdmYzRlZmMxNGY1MzZlN2EwYjYyNWVlMWY0Nzk2MDBhNWZlY2I)
+
+## Sponsors
+
+[Mado](https://madao.me/) | [Become a sponsor](https://www.patreon.com/timqian)
 
 ## Quick start
 

diff --git a/src/Bar.js b/src/Bar.js
@@ -17,22 +17,17 @@ const margin = {
 
 class Bar {
   constructor(svg, {
-    title, xLabel, yLabel, data: { labels, datasets },
-    options = {
+    title, xLabel, yLabel, data: { labels, datasets }, options,
+  }) {
+    this.options = {
       unxkcdify: false,
       yTickCount: 3,
-      dataColors: [],
+      dataColors: colors,
       fontFamily: 'xkcd',
       strokeColor: 'black',
       backgroundColor: 'white',
-    },
-  }) {
-    if(!options.strokeColor) {
-      options.strokeColor = 'black';
-    }
-    if(!options.backgroundColor) {
-      options.backgroundColor = 'white';
-    }
+      ...options,
+    };
     if (title) {
       this.title = title;
       margin.top = 60;
@@ -49,20 +44,17 @@ class Bar {
       labels,
       datasets,
     };
-    this.options = options;
-    this.strokeColor = options.strokeColor;
-    this.backgroundColor = options.backgroundColor;
     this.filter = 'url(#xkcdify)';
     this.fontFamily = this.options.fontFamily || 'xkcd';
-    if (options.unxkcdify) {
+    if (this.options.unxkcdify) {
       this.filter = null;
       this.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
     }
 
     this.svgEl = select(svg)
       .style('stroke-width', '3')
       .style('font-family', this.fontFamily)
-      .style('background', this.backgroundColor)
+      .style('background', this.options.backgroundColor)
       .attr('width', svg.parentElement.clientWidth)
       .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight));
 
@@ -80,18 +72,18 @@ class Bar {
   }
 
   render() {
-    if (this.title) addLabels.title(this.svgEl, this.title, this.strokeColor);
-    if (this.xLabel) addLabels.xLabel(this.svgEl, this.xLabel, this.strokeColor);
-    if (this.yLabel) addLabels.yLabel(this.svgEl, this.yLabel, this.strokeColor);
+    if (this.title) addLabels.title(this.svgEl, this.title, this.options.strokeColor);
+    if (this.xLabel) addLabels.xLabel(this.svgEl, this.xLabel, this.options.strokeColor);
+    if (this.yLabel) addLabels.yLabel(this.svgEl, this.yLabel, this.options.strokeColor);
 
     const tooltip = new Tooltip({
       parent: this.svgEl,
       title: 'tooltip',
       items: [{ color: 'red', text: 'weweyang: 12' }, { color: 'blue', text: 'timqian: 13' }],
       position: { x: 30, y: 30, type: config.positionType.upRight },
       unxkcdify: this.options.unxkcdify,
-      backgroundColor: this.backgroundColor,
-      strokeColor: this.strokeColor,
+      backgroundColor: this.options.backgroundColor,
+      strokeColor: this.options.strokeColor,
     });
 
     const xScale = scaleBand()
@@ -115,14 +107,14 @@ class Bar {
       moveDown: this.height,
       fontFamily: this.fontFamily,
       unxkcdify: this.options.unxkcdify,
-      stroke: this.strokeColor,
+      stroke: this.options.strokeColor,
     });
     addAxis.yAxis(graphPart, {
       yScale,
       tickCount: this.options.yTickCount || 3,
       fontFamily: this.fontFamily,
       unxkcdify: this.options.unxkcdify,
-      stroke: this.strokeColor,
+      stroke: this.options.strokeColor,
     });
 
     // Bars
@@ -137,13 +129,13 @@ class Bar {
       .attr('height', (d) => this.height - yScale(d))
       .attr('fill', 'none')
       .attr('pointer-events', 'all')
-      .attr('stroke', this.strokeColor)
+      .attr('stroke', this.options.strokeColor)
       .attr('stroke-width', 3)
       .attr('rx', 2)
       // .attr('cursor','crosshair')
       .attr('filter', this.filter)
       .on('mouseover', (d, i, nodes) => {
-        select(nodes[i]).attr('fill', this.options.dataColors ? this.options.dataColors[i] : colors[i]);
+        select(nodes[i]).attr('fill', this.options.dataColors[i]);
         // select(nodes[i]).attr('fill', 'url(#hatch00)');
         tooltip.show();
       })
@@ -166,7 +158,7 @@ class Bar {
         tooltip.update({
           title: this.data.labels[i],
           items: [{
-            color: this.options.dataColors ? this.options.dataColors[i] : colors[i],
+            color: this.options.dataColors[i],
             text: `${this.data.datasets[0].label || ''}: ${d}`,
           }],
           position: {