testio-tailwind 0.1.0 → 0.2.1

package/src/pages/charts/donut.haml

@@ -1,270 +1,270 @@
----
-tags: charts
-title: Donut chart
----
-
-.div
-  %details.listitem.mb-md
-    %summary.listitem-header
-      .listitem-title
-        %span.icon.icon-format-code.mr-xs
-        Initialize donut 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 { createChartDonut } from './modules/echarts_donut';
-            createChartDonut (target, targetData, valueText, labelText, showLegend);
-      .listitem-subheadline echarts_donuts.js
-      .listitem-card
-        %pre.code.break-spaces
-          :plain
-            import * as echarts from 'echarts';
-            import { echartsLegend, legendHeight } from './echarts_legend';
-            var legendOptions;
-            export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
-              var chartHeight = 190;
-              var chartPlusLegendHeight;
-              if (showLegend) {
-                chartPlusLegendHeight = chartHeight + legendHeight,
-                legendOptions = echartsLegend
-              } else {
-                chartPlusLegendHeight = chartHeight,
-                legendOptions = null
-              }
-              var dom = document.getElementById(target);
-              var myChartDonut = echarts.init(dom, null, {
-                renderer: 'canvas',
-                useDirtyRect: false,
-                height: chartPlusLegendHeight
-              });
-              var optionDonut;
-              var optionDonut = {
-                tooltip: {
-                  trigger: 'item'
-                },
-                layout: {
-                },
-                title: {
-                  text: valueText,
-                  subtext: labelText,
-                  left: "center",
-                  top: 60,
-                  textVerticalAlign: "top",
-                  itemGap: 0,
-                  textStyle: {
-                    fontSize: 60,
-                    lineHeight: 60,
-                    fontWeight: "lighter"
-                  },
-                  subtextStyle: {
-                    overflow: "break",
-                    width: 100,
-                    top: 50,
-                    fontSize: 11,
-                    lineHeight: 12
-                  }
-                },
-                tooltips: {
-                  enabled: false
-                },
-                aspectRatio: 1,
-                legend: legendOptions,
-                series: [
-                  {
-                    type: 'pie',
-                    radius: ['80', '90'],
-                    avoidLabelOverlap: false,
-                    height: chartHeight,
-                    top: 0,
-                    center: ['50%', '50%'],
-                    label: {
-                      show: false,
-                      position: 'center'
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    labelLine: {
-                      show: false
-                    },
-                    data: targetData
-                  }
-                ]
-              };
-              if (optionDonut && typeof optionDonut === 'object') {
-                myChartDonut.setOption(optionDonut);
-              }
-              window.addEventListener('resize', myChartDonut.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'
-            };
-.row
-  .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-donut-1
-    %details.listitem.mb-md
-      %summary.listitem-header
-        .listitem-title
-          %span.icon.icon-format-code.mr-xs
-          Initialize donut chart without 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 { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
-        .listitem-subheadline data.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
-              export let dataBugs = [
-                { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
-                { value: 37, name: 'High', itemStyle: {color: colorHigh}},
-                { value: 19, name: 'Low', itemStyle: {color: colorLow}},
-                { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
-                { value: 53, name: 'Content', itemStyle: {color: colorContent}},
-                { value: 53, name: 'UX', itemStyle: {color: colorUX}},
-              ];
-        .listitem-subheadline colors.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              export const colorCritical = '#FF3131';
-              export const colorHigh = '#d8ce0d';
-              export const colorLow = '#9fa2a8';
-              export const colorVisual = '#f48d21';
-              export const colorContent = '#326dd1';
-              export const colorUX = '#263340';
-              export const colorSuccess = '#8cbd24';
-              export const colorDanger = '#FF3131';
-              export const colorNeutral = '#e6e6e6';
-              export const colorInfo = '#326dd1';
-              export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-donut-2
-    %details.listitem.mb-md
-      %summary.listitem-header
-        .listitem-title
-          %span.icon.icon-format-code.mr-xs
-          Initialize donut chart with 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 { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true);
-        .listitem-subheadline data.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
-              export let dataBugs = [
-                { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
-                { value: 37, name: 'High', itemStyle: {color: colorHigh}},
-                { value: 19, name: 'Low', itemStyle: {color: colorLow}},
-                { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
-                { value: 53, name: 'Content', itemStyle: {color: colorContent}},
-                { value: 53, name: 'UX', itemStyle: {color: colorUX}},
-              ];
-        .listitem-subheadline colors.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              export const colorCritical = '#FF3131';
-              export const colorHigh = '#d8ce0d';
-              export const colorLow = '#9fa2a8';
-              export const colorVisual = '#f48d21';
-              export const colorContent = '#326dd1';
-              export const colorUX = '#263340';
-              export const colorSuccess = '#8cbd24';
-              export const colorDanger = '#FF3131';
-              export const colorNeutral = '#e6e6e6';
-              export const colorInfo = '#326dd1';
-              export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-donut-testcases
-    %details.listitem.mb-md
-      %summary.listitem-header
-        .listitem-title
-          %span.icon.icon-format-code.mr-xs
-          Initialize donut chart without legend and fewer data
-        .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 { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
-        .listitem-subheadline data.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
-              export let dataTestCases = [
-                { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
-                { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
-                { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
-              ];
-        .listitem-subheadline colors.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              export const colorCritical = '#FF3131';
-              export const colorHigh = '#d8ce0d';
-              export const colorLow = '#9fa2a8';
-              export const colorVisual = '#f48d21';
-              export const colorContent = '#326dd1';
-              export const colorUX = '#263340';
-              export const colorSuccess = '#8cbd24';
-              export const colorDanger = '#FF3131';
-              export const colorNeutral = '#e6e6e6';
-              export const colorInfo = '#326dd1';
+---
+tags: charts
+title: Donut chart
+---
+
+.div
+  %details.listitem.mb-md
+    %summary.listitem-header
+      .listitem-title
+        %span.icon.icon-format-code.mr-xs
+        Initialize donut 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 { createChartDonut } from './modules/echarts_donut';
+            createChartDonut (target, targetData, valueText, labelText, showLegend);
+      .listitem-subheadline echarts_donuts.js
+      .listitem-card
+        %pre.code.break-spaces
+          :plain
+            import * as echarts from 'echarts';
+            import { echartsLegend, legendHeight } from './echarts_legend';
+            var legendOptions;
+            export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
+              var chartHeight = 190;
+              var chartPlusLegendHeight;
+              if (showLegend) {
+                chartPlusLegendHeight = chartHeight + legendHeight,
+                legendOptions = echartsLegend
+              } else {
+                chartPlusLegendHeight = chartHeight,
+                legendOptions = null
+              }
+              var dom = document.getElementById(target);
+              var myChartDonut = echarts.init(dom, null, {
+                renderer: 'canvas',
+                useDirtyRect: false,
+                height: chartPlusLegendHeight
+              });
+              var optionDonut;
+              var optionDonut = {
+                tooltip: {
+                  trigger: 'item'
+                },
+                layout: {
+                },
+                title: {
+                  text: valueText,
+                  subtext: labelText,
+                  left: "center",
+                  top: 60,
+                  textVerticalAlign: "top",
+                  itemGap: 0,
+                  textStyle: {
+                    fontSize: 60,
+                    lineHeight: 60,
+                    fontWeight: "lighter"
+                  },
+                  subtextStyle: {
+                    overflow: "break",
+                    width: 100,
+                    top: 50,
+                    fontSize: 11,
+                    lineHeight: 12
+                  }
+                },
+                tooltips: {
+                  enabled: false
+                },
+                aspectRatio: 1,
+                legend: legendOptions,
+                series: [
+                  {
+                    type: 'pie',
+                    radius: ['80', '90'],
+                    avoidLabelOverlap: false,
+                    height: chartHeight,
+                    top: 0,
+                    center: ['50%', '50%'],
+                    label: {
+                      show: false,
+                      position: 'center'
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    data: targetData
+                  }
+                ]
+              };
+              if (optionDonut && typeof optionDonut === 'object') {
+                myChartDonut.setOption(optionDonut);
+              }
+              window.addEventListener('resize', myChartDonut.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'
+            };
+.row
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-donut-1
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize donut chart without 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 { createChartDonut } from './modules/echarts_donut';
+              createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+              export let dataBugs = [
+                { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+                { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+                { value: 19, name: 'Low', itemStyle: {color: colorLow}},
+                { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
+                { value: 53, name: 'Content', itemStyle: {color: colorContent}},
+                { value: 53, name: 'UX', itemStyle: {color: colorUX}},
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorCritical = '#FF3131';
+              export const colorHigh = '#d8ce0d';
+              export const colorLow = '#9fa2a8';
+              export const colorVisual = '#f48d21';
+              export const colorContent = '#326dd1';
+              export const colorUX = '#263340';
+              export const colorSuccess = '#8cbd24';
+              export const colorDanger = '#FF3131';
+              export const colorNeutral = '#e6e6e6';
+              export const colorInfo = '#326dd1';
+              export const colorBlueLight = '#21bef4';
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-donut-2
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize donut chart with 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 { createChartDonut } from './modules/echarts_donut';
+              createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+              export let dataBugs = [
+                { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+                { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+                { value: 19, name: 'Low', itemStyle: {color: colorLow}},
+                { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
+                { value: 53, name: 'Content', itemStyle: {color: colorContent}},
+                { value: 53, name: 'UX', itemStyle: {color: colorUX}},
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorCritical = '#FF3131';
+              export const colorHigh = '#d8ce0d';
+              export const colorLow = '#9fa2a8';
+              export const colorVisual = '#f48d21';
+              export const colorContent = '#326dd1';
+              export const colorUX = '#263340';
+              export const colorSuccess = '#8cbd24';
+              export const colorDanger = '#FF3131';
+              export const colorNeutral = '#e6e6e6';
+              export const colorInfo = '#326dd1';
+              export const colorBlueLight = '#21bef4';
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-donut-testcases
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize donut chart without legend and fewer data
+        .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 { createChartDonut } from './modules/echarts_donut';
+              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+              export let dataTestCases = [
+                { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
+                { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
+                { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorCritical = '#FF3131';
+              export const colorHigh = '#d8ce0d';
+              export const colorLow = '#9fa2a8';
+              export const colorVisual = '#f48d21';
+              export const colorContent = '#326dd1';
+              export const colorUX = '#263340';
+              export const colorSuccess = '#8cbd24';
+              export const colorDanger = '#FF3131';
+              export const colorNeutral = '#e6e6e6';
+              export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';