testio-tailwind 3.2.0 → 3.4.0

package/src/pages/charts/bar_vertical.haml

@@ -3,169 +3,12 @@ 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.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.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
+      Initialize vertical bar chart
     .listitem-metrics
     .listitem-actions
       .btn.collapse-btn
@@ -178,215 +21,378 @@ title: Bar chart vertical
       %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
+          createChartVertical (target, targetDataY, targetDataX, itemWidth);
+    .listitem-subheadline echarts_vertical.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.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.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.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.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'
-          ];
+          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);
+          }
+.grid.gap-spacing{class:"lg:grid-cols-2"}
+  .col
+    %p.mt-md.mb-xs With adaptive item width
+    .card.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';
+  .col
+    %p.mt-md.mb-xs With adaptive item width
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-bar-vertical-1-dark
+    %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';
+  .col
+    .card.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';
+  .col
+    .card.p-md.mb-md
+      .echarts-container#echarts-bar-vertical-2-fixed
+    %details.listitem
+      %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';
+  .col
+    .card.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'
+              ];
+  .col
+    .card.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'
+              ];