testio-tailwind 0.1.0

package/src/pages/charts/bar_vertical.haml

@@ -0,0 +1,392 @@
+---
+tags: charts
+title: Bar chart vertical
+---
+
+.div
+  %details.listitem.mb-md
+    %summary.listitem-header
+      .listitem-title
+        %span.icon.icon-format-code.mr-xs
+        Initialize vertical 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 { createChartVertical } from './modules/echarts_vertical';
+            createChartVertical (target, targetDataY, targetDataX, itemWidth);
+      .listitem-subheadline echarts_vertical.js
+      .listitem-card
+        %pre.code.break-spaces
+          :plain
+            import * as echarts from 'echarts';
+            export function createChartVertical (target, targetDataY, targetDataX, itemWidth) {
+              var chartHeight = 200;
+              var labelHeight = 20;
+              var dom = document.getElementById(target);
+              var myChartVertical = echarts.init(dom, null, {
+                renderer: 'canvas',
+                useDirtyRect: false,
+                height: chartHeight + labelHeight
+              });
+              var itemWidthUser; 
+              if (itemWidth) {
+                var itemWidthUser = itemWidth;
+              } else {
+                itemWidthUser = targetDataX.length -1
+              };
+              var optionVertical;
+              var optionVertical = {
+                tooltip: {
+                  trigger: 'axis',
+                  axisPointer: {
+                    type: 'shadow'
+                  }
+                },
+                grid: {
+                  height: chartHeight,
+                  top: '15',
+                  left: '0',
+                  right: '10',
+                  bottom: '0',
+                  containLabel: true
+                },
+                xAxis: {
+                  show: true,
+                  type: 'category',
+                  max: itemWidthUser,
+                  data: targetDataX,
+                  axisTick: {
+                    show: false
+                  },
+                  axisLine: {
+                    show: false
+                  },
+                  axisLabel: {
+                    show: true,
+                    width: 100,
+                    overflow: "truncate",
+                    ellipsis: '…',
+                    hideOverlap: true,
+                    interval: 0
+                  }
+                },
+                yAxis: {
+                  show: false,
+                  type: 'value'
+                },
+                series: [
+                  {
+                    data: targetDataY,
+                    type: 'bar',
+                    barWidth: 15,
+                    label: {
+                      show: true,
+                      position: 'center',
+                      verticalAlign: 'top',
+                      offset: [0, -15]
+                    }
+                  }
+                ]
+              };
+              if (optionVertical && typeof optionVertical === 'object') {
+                myChartVertical.setOption(optionVertical);
+              }
+              window.addEventListener('resize', myChartVertical.resize);
+            }
+
+%p.mt-md.mb-xs With adaptive item width
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-vertical-1
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with 6 items
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories);
+    .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}},
+          ];
+          export let dataBugsCategories = [
+            { value:'Critical'},
+            { value: 'High'},
+            { value: 'Low'},
+            { value: 'Visual'},
+            { value: 'Content'},
+            { value: 'UX'}
+          ];
+    .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';
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-vertical-2
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with 3 items
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew);
+    .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 dataBugsFew = [
+            { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+            { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+            { value: 19, name: 'Low', itemStyle: {color: colorLow}}
+          ];
+          export let dataBugsCategoriesFew = [
+            { value:'Critical'},
+            { value: 'High'},
+            { value: 'Low'}
+          ];
+    .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';
+.card.bg-gray-lightest.p-xs.mb-xs
+  .echarts-container#echarts-bar-vertical-3
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with longer item names
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany);
+    .listitem-subheadline data.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export let dataFeaturesManyNumbers = [
+            8, 33, 64, 23, 55, 77, 39, 57
+          ];
+          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'
+          ];
+%p.mt-md.mb-xs With fixed item width
+.card.bg-gray-lightest.p-md.mb-md
+  .echarts-container#echarts-bar-vertical-1-fixed
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with 6 items and fixed width
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-1-fixed", dataBugs, dataBugsCategories, 10);
+    .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}},
+          ];
+          export let dataBugsCategories = [
+            { value:'Critical'},
+            { value: 'High'},
+            { value: 'Low'},
+            { value: 'Visual'},
+            { value: 'Content'},
+            { value: 'UX'}
+          ];
+    .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';
+.card.bg-gray-lightest.p-md.mb-md
+  .echarts-container#echarts-bar-vertical-2-fixed
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with 3 items and fixed width
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, 10);
+    .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 dataBugsFew = [
+            { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+            { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+            { value: 19, name: 'Low', itemStyle: {color: colorLow}}
+          ];
+          export let dataBugsCategoriesFew = [
+            { value:'Critical'},
+            { value: 'High'},
+            { value: 'Low'}
+          ];
+    .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';
+.card.bg-gray-lightest.p-md
+  .echarts-container#echarts-bar-vertical-3-fixed
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Create vertical bar chart with longer item names and fixed width
+    .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 { createChartVertical } from './modules/echarts_vertical';
+          createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, 10);
+    .listitem-subheadline data.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export let dataFeaturesManyNumbers = [
+            8, 33, 64, 23, 55, 77, 39, 57
+          ];
+          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'
+          ];

package/src/pages/charts/donut.haml

@@ -0,0 +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';
+              export const colorBlueLight = '#21bef4';