testio-tailwind 0.1.0 → 0.2.1

package/src/pages/charts/bar_horizontal.haml

@@ -1,336 +1,336 @@
----
-tags: charts
-title: Bar chart horizontal
----
-
-%details.listitem.mb-md
-  %summary.listitem-header
-    .listitem-title
-      %span.icon.icon-format-code.mr-xs
-      Initialize horizontal bar chart
-    .listitem-metrics
-    .listitem-actions
-      .btn.collapse-btn
-  .listitem-content
-    .listitem-subheadline HTML
-    .listitem-card
-      %code .echarts-container#element-id
-    .listitem-subheadline app.js
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import { createChartHorizontal } from './modules/echarts_horizontal';
-          createChartHorizontal("element-id", data, series, showLegend);
-    .listitem-subheadline echarts_horizontal.js
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import * as echarts from 'echarts';
-          import { echartsLegend, legendHeight } from './echarts_legend';
-          var legendOptions;
-          export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
-            var chartHeight = targetData.length * 20;
-            var chartPlusLegendHeight;
-            if (showLegend) {
-              chartPlusLegendHeight = chartHeight + legendHeight,
-              legendOptions = echartsLegend
-            } else {
-              chartPlusLegendHeight = chartHeight + 0,
-              legendOptions = null
-            }
-            var dom = document.getElementById(target);
-            var myChartHorizontal = echarts.init(dom, null, {
-              renderer: 'canvas',
-              useDirtyRect: false,
-              height: chartPlusLegendHeight
-            });
-            var optionHorizontal;
-            var optionHorizontal = {
-              tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                  type: 'shadow'
-                }
-              },
-              legend: legendOptions,
-              grid: {
-                height: chartHeight,
-                top: 0,
-                left: '12',
-                right: '10',
-                bottom: 0,
-                containLabel: true,
-                align: 'top'
-              },
-              xAxis: {
-                type: 'value',
-                axisTick: {
-                  show: false
-                  },
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                },
-                splitLine: {
-                  show: false
-                }
-              },
-              yAxis: {
-                data: targetData,
-                scale: false,
-                axisTick: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  show: true,
-                  overflow: "truncate",
-                  ellipsis: '…',
-                  hideOverlap: false,
-                  interval: 0
-                }
-              },
-              series: targetSeries
-            };
-            if (optionHorizontal && typeof optionHorizontal === 'object') {
-              myChartHorizontal.setOption(optionHorizontal);
-            }
-            window.addEventListener('resize', myChartHorizontal.resize);
-          }
-    .listitem-subheadline echarts_legend.js
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          export const legendHeight = 30;
-          export const echartsLegend = {
-            type: 'scroll',
-            orient: 'horizontal',
-            padding: 0,
-            icon: 'circle',
-            itemGap: 10,
-            itemHeight: 5,
-            itemWidth: 5,
-            height: '20',
-            left: 'center',
-            bottom: 'bottom'
-          };
-.card.bg-gray-lightest.p-md.mb-xs
-  .echarts-container#echarts-bar-horizontal-1
-%details.listitem.mb-lg
-  %summary.listitem-header
-    .listitem-title
-      %span.icon.icon-format-code.mr-xs
-      Horizontal chart, 3 Features, some bugs, no legend
-    .listitem-metrics
-    .listitem-actions
-      .btn.collapse-btn
-  .listitem-content
-    .listitem-subheadline HTML
-    .listitem-card
-      %code .echarts-container#element-id
-    .listitem-subheadline app.js
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import { createChartHorizontal } from './modules/echarts_horizontal';
-          createChartHorizontal("element-id", dataFeaturesFew, echartsSeriesFew, false);
-    .listitem-subheadline Data
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          export let dataFeaturesFew = [
-            'Feature A', 
-            'Feature B', 
-            'ABC'
-          ]
-    .listitem-subheadline Series, Javascript
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
-          var barType = 'bar';
-          var stackType = 'stack';
-          var barWidth = 0;
-          var barMaxWidth = 10;
-          var barGap = 0;
-          var barCategoryGap = 0;
-          export let echartsSeriesFew = [
-            {
-              name: 'Critical',
-              itemStyle: {color: colorCritical},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [7, 22, 1]
-            },
-            {
-              name: 'High',
-              itemStyle: {color: colorHigh},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [23, 21, 13]
-            },
-            {
-              name: 'Low',
-              itemStyle: {color: colorLow},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [9, 15, 4]
-            }
-          ];
-%p.mt-md.mb-xs With legend and long feature names
-.card.bg-gray-lightest.p-md.mb-xs
-  .echarts-container#echarts-bar-horizontal-2
-%details.listitem.mb-lg
-  %summary.listitem-header
-    .listitem-title
-      %span.icon.icon-format-code.mr-xs
-      Horizontal chart, 8 Features, many bugs, legend
-    .listitem-metrics
-    .listitem-actions
-      .btn.collapse-btn
-  .listitem-content
-    .listitem-subheadline HTML
-    .listitem-card
-      %code .echarts-container#element-id
-    .listitem-subheadline app.js
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import { createChartHorizontal } from './modules/echarts_horizontal';
-          createChartHorizontal("element-id", dataFeaturesMany, echartsSeriesMany, true);
-    .listitem-subheadline Data
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          export let dataFeaturesMany = [
-            'Feature A', 
-            'Feature B', 
-            'Feature with a very long name', 
-            'Feature with an even longer name', 
-            'ABC', 
-            'ZDF', 
-            'WWW',
-            'Just another feature name'
-          ];
-    .listitem-subheadline Series, Javascript
-    .listitem-card
-      %pre.code.break-spaces
-        :plain
-          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
-          var barType = 'bar';
-          var stackType = 'stack';
-          var barWidth = 0;
-          var barMaxWidth = 10;
-          var barGap = 0;
-          var barCategoryGap = 0;
-          export let echartsSeriesMany = [
-            {
-              name: 'Critical',
-              itemStyle: {color: colorCritical},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [7, 22, 1, 9, 15, 4, 11, 0]
-            },
-            {
-              name: 'High',
-              itemStyle: {color: colorHigh},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [23, 21, 13, 0, 1, 9, 15, 4]
-            },
-            {
-              name: 'Low',
-              itemStyle: {color: colorLow},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [9, 15, 4, 11, 23, 13, 2, 1]
-            },
-            {
-              name: 'Visual',
-              itemStyle: {color: colorVisual},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [13, 14, 1, 9, 15, 4, 11, 10]
-            },
-            {
-              name: 'Content',
-              itemStyle: {color: colorContent},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [13, 22, 1, 9, 15, 4, 8, 13]
-            },
-            {
-              name: 'UX',
-              itemStyle: {color: colorUX},
-              type: barType,
-              stack: stackType,
-              barWidth: barWidth,
-              barMaxWidth: barMaxWidth,
-              barGap: barGap,
-              barCategoryGap: barCategoryGap,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [13, 0, 1, 9, 15, 4, 2, 3]
-            }
+---
+tags: charts
+title: Bar chart horizontal
+---
+
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Initialize horizontal bar chart
+    .listitem-metrics
+    .listitem-actions
+      .btn.collapse-btn
+  .listitem-content
+    .listitem-subheadline HTML
+    .listitem-card
+      %code .echarts-container#element-id
+    .listitem-subheadline app.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", data, series, showLegend);
+    .listitem-subheadline echarts_horizontal.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import * as echarts from 'echarts';
+          import { echartsLegend, legendHeight } from './echarts_legend';
+          var legendOptions;
+          export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
+            var chartHeight = targetData.length * 20;
+            var chartPlusLegendHeight;
+            if (showLegend) {
+              chartPlusLegendHeight = chartHeight + legendHeight,
+              legendOptions = echartsLegend
+            } else {
+              chartPlusLegendHeight = chartHeight + 0,
+              legendOptions = null
+            }
+            var dom = document.getElementById(target);
+            var myChartHorizontal = echarts.init(dom, null, {
+              renderer: 'canvas',
+              useDirtyRect: false,
+              height: chartPlusLegendHeight
+            });
+            var optionHorizontal;
+            var optionHorizontal = {
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow'
+                }
+              },
+              legend: legendOptions,
+              grid: {
+                height: chartHeight,
+                top: 0,
+                left: '12',
+                right: '10',
+                bottom: 0,
+                containLabel: true,
+                align: 'top'
+              },
+              xAxis: {
+                type: 'value',
+                axisTick: {
+                  show: false
+                  },
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                },
+                splitLine: {
+                  show: false
+                }
+              },
+              yAxis: {
+                data: targetData,
+                scale: false,
+                axisTick: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: true,
+                  overflow: "truncate",
+                  ellipsis: '…',
+                  hideOverlap: false,
+                  interval: 0
+                }
+              },
+              series: targetSeries
+            };
+            if (optionHorizontal && typeof optionHorizontal === 'object') {
+              myChartHorizontal.setOption(optionHorizontal);
+            }
+            window.addEventListener('resize', myChartHorizontal.resize);
+          }
+    .listitem-subheadline echarts_legend.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export const legendHeight = 30;
+          export const echartsLegend = {
+            type: 'scroll',
+            orient: 'horizontal',
+            padding: 0,
+            icon: 'circle',
+            itemGap: 10,
+            itemHeight: 5,
+            itemWidth: 5,
+            height: '20',
+            left: 'center',
+            bottom: 'bottom'
+          };
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-horizontal-1
+%details.listitem.mb-lg
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Horizontal chart, 3 Features, some bugs, no legend
+    .listitem-metrics
+    .listitem-actions
+      .btn.collapse-btn
+  .listitem-content
+    .listitem-subheadline HTML
+    .listitem-card
+      %code .echarts-container#element-id
+    .listitem-subheadline app.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", dataFeaturesFew, echartsSeriesFew, false);
+    .listitem-subheadline Data
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export let dataFeaturesFew = [
+            'Feature A', 
+            'Feature B', 
+            'ABC'
+          ]
+    .listitem-subheadline Series, Javascript
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
+          var barType = 'bar';
+          var stackType = 'stack';
+          var barWidth = 0;
+          var barMaxWidth = 10;
+          var barGap = 0;
+          var barCategoryGap = 0;
+          export let echartsSeriesFew = [
+            {
+              name: 'Critical',
+              itemStyle: {color: colorCritical},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [7, 22, 1]
+            },
+            {
+              name: 'High',
+              itemStyle: {color: colorHigh},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [23, 21, 13]
+            },
+            {
+              name: 'Low',
+              itemStyle: {color: colorLow},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [9, 15, 4]
+            }
+          ];
+%p.mt-md.mb-xs With legend and long feature names
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-horizontal-2
+%details.listitem.mb-lg
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Horizontal chart, 8 Features, many bugs, legend
+    .listitem-metrics
+    .listitem-actions
+      .btn.collapse-btn
+  .listitem-content
+    .listitem-subheadline HTML
+    .listitem-card
+      %code .echarts-container#element-id
+    .listitem-subheadline app.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", dataFeaturesMany, echartsSeriesMany, true);
+    .listitem-subheadline Data
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export let dataFeaturesMany = [
+            'Feature A', 
+            'Feature B', 
+            'Feature with a very long name', 
+            'Feature with an even longer name', 
+            'ABC', 
+            'ZDF', 
+            'WWW',
+            'Just another feature name'
+          ];
+    .listitem-subheadline Series, Javascript
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
+          var barType = 'bar';
+          var stackType = 'stack';
+          var barWidth = 0;
+          var barMaxWidth = 10;
+          var barGap = 0;
+          var barCategoryGap = 0;
+          export let echartsSeriesMany = [
+            {
+              name: 'Critical',
+              itemStyle: {color: colorCritical},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [7, 22, 1, 9, 15, 4, 11, 0]
+            },
+            {
+              name: 'High',
+              itemStyle: {color: colorHigh},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [23, 21, 13, 0, 1, 9, 15, 4]
+            },
+            {
+              name: 'Low',
+              itemStyle: {color: colorLow},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [9, 15, 4, 11, 23, 13, 2, 1]
+            },
+            {
+              name: 'Visual',
+              itemStyle: {color: colorVisual},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [13, 14, 1, 9, 15, 4, 11, 10]
+            },
+            {
+              name: 'Content',
+              itemStyle: {color: colorContent},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [13, 22, 1, 9, 15, 4, 8, 13]
+            },
+            {
+              name: 'UX',
+              itemStyle: {color: colorUX},
+              type: barType,
+              stack: stackType,
+              barWidth: barWidth,
+              barMaxWidth: barMaxWidth,
+              barGap: barGap,
+              barCategoryGap: barCategoryGap,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [13, 0, 1, 9, 15, 4, 2, 3]
+            }
           ];