testio-tailwind 0.2.0 → 0.2.1

package/src/pages/charts/bar_vertical.haml

@@ -1,392 +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'
+---
+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'
           ];