Change tabs from area samples to buttons to switch to be in line with…

… other samples, change linewith of extra line datasets to default instead of 1 to be in line with all other lines in the sampels (#8780)
chartjs · Apr 2, 2021 · c9eec31 · c9eec31
1 parent eef5c1e
commit c9eec31
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 404 deletions.
diff --git a/docs/samples/advanced/progress-bar.md b/docs/samples/advanced/progress-bar.md
@@ -23,7 +23,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/animations/drop.md b/docs/samples/animations/drop.md
@@ -21,7 +21,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/animations/loop.md b/docs/samples/animations/loop.md
@@ -21,7 +21,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/area/line-boundaries.md b/docs/samples/area/line-boundaries.md
@@ -1,9 +1,5 @@
 # Line Chart Boundaries
 
-:::: tabs
-
-::: tab "Fill: false"
-
 ```js chart-editor
 // <block:setup:2>
 const inputs = {
@@ -41,261 +37,44 @@ let smooth = false;
 
 const actions = [
   {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: false (default)',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = false;
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
-      chart.update();
-    }
-  }
-];
-// </block:actions>
-
-// <block:config:1>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false,
-    }
-  },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: origin"
-
-```js chart-editor
-// <block:setup:2>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'origin'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:3>
-let smooth = false;
-
-const actions = [
-  {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: origin',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = 'origin';
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
-      chart.update();
-    }
-  }
-];
-// </block:actions>
-
-// <block:config:1>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false
-    },
-  },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: start"
-
-```js chart-editor
-// <block:setup:1>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'start'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:2>
-let smooth = false;
-
-const actions = [
-  {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: start',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = 'start';
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
+    name: 'Fill: end',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.fill = 'end';
+      });
       chart.update();
     }
-  }
-];
-// </block:actions>
-
-// <block:config:0>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false,
-    },
   },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: end"
-
-```js chart-editor
-// <block:setup:2>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'end'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:3>
-let smooth = false;
-
-const actions = [
   {
     name: 'Randomize',
     handler(chart) {
-      // Utils.srand(Utils.rand())
       chart.data.datasets.forEach(dataset => {
         dataset.data = generateData();
       });
@@ -321,11 +100,15 @@ const config = {
     plugins: {
       filler: {
         propagate: false,
+      },
+      title: {
+        display: true,
+        text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
       }
     },
     interaction: {
       intersect: false,
-    },
+    }
   },
 };
 // </block:config>
@@ -335,7 +118,3 @@ module.exports = {
   config: config,
 };
 ```
-
-:::
-
-::::