testio-tailwind 3.3.0 → 3.5.0

package/src/pages/charts/colors.haml

@@ -0,0 +1,28 @@
+---
+tags: charts
+title: Colors JS
+---
+
+.card
+  .card-body
+    %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 colorNeutralBright = '#bfc1c5';
+        export const colorNeutralDark = '#343A40';
+        export const colorInfo = '#326dd1';
+        export const colorBlueLight = '#21bef4';
+        export const colorBorderBright = '#e6e6e6';
+        export const colorBorderDark = '#262626';
+        export const colorLabelBright = '#5f656d';
+        export const colorLabelDark = '#bfc1c5';
+        export const colorValueBright = '#1d1d1d';
+        export const colorValueDark = '#ffffff';
+        export const colorTealLight = '#6ddeba';

package/src/pages/charts/donut.haml

@@ -21,7 +21,7 @@ title: Donut chart
         %pre.code.break-spaces
           :plain
             import { createChartDonut } from './modules/echarts_donut';
-            createChartDonut (target, targetData, valueText, labelText, showLegend);
+            createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor)
       .listitem-subheadline echarts_donuts.js
       .listitem-card
         %pre.code.break-spaces
@@ -29,12 +29,26 @@ title: Donut chart
             import * as echarts from 'echarts';
             import { echartsLegend, legendHeight } from './echarts_legend';
             var legendOptions;
-            export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
+            export function createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor) {
               var chartHeight = 190;
               var chartPlusLegendHeight;
               if (showLegend) {
                 chartPlusLegendHeight = chartHeight + legendHeight,
-                legendOptions = echartsLegend
+                legendOptions = {
+                  type: echartsLegend.type,
+                  orient: echartsLegend.orient,
+                  padding: echartsLegend.padding,
+                  icon: echartsLegend.icon,
+                  itemGap: echartsLegend.itemGap,
+                  itemHeight: echartsLegend.itemHeight,
+                  itemWidth: echartsLegend.itemWidth,
+                  height: echartsLegend.height,
+                  left: echartsLegend.left,
+                  bottom: echartsLegend.bottom,
+                  textStyle:{
+                  color:labelColor
+                  },
+                }
               } else {
                 chartPlusLegendHeight = chartHeight,
                 legendOptions = null
@@ -62,14 +76,16 @@ title: Donut chart
                   textStyle: {
                     fontSize: 60,
                     lineHeight: 60,
-                    fontWeight: "lighter"
+                    fontWeight: "lighter",
+                    color: valueColor
                   },
                   subtextStyle: {
                     overflow: "break",
                     width: 100,
                     top: 50,
                     fontSize: 11,
-                    lineHeight: 12
+                    lineHeight: 12,
+                    color: labelColor
                   }
                 },
                 tooltips: {
@@ -123,15 +139,15 @@ title: Donut chart
               left: 'center',
               bottom: 'bottom'
             };
-.row
-  .col-lg-6.col-xl-4
+.grid.gap-spacing{class:"lg:grid-cols-2"}
+  .col
     .card.p-md.mb-xs
-      .echarts-container#echarts-donut-1
+      .echarts-container#echarts-donut-2
     %details.listitem.mb-md
       %summary.listitem-header
         .listitem-title
           %span.icon.icon-format-code.mr-xs
-          Initialize donut chart without legend
+          Initialize donut chart with legend
         .listitem-metrics
         .listitem-actions
           .btn.collapse-btn
@@ -144,7 +160,7 @@ title: Donut chart
           %pre.code.break-spaces
             :plain
               import { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
+              createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces
@@ -173,9 +189,9 @@ title: Donut chart
               export const colorNeutral = '#e6e6e6';
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
-    .card.p-md.mb-xs
-      .echarts-container#echarts-donut-2
+  .col
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-donut-2-dark
     %details.listitem.mb-md
       %summary.listitem-header
         .listitem-title
@@ -193,7 +209,56 @@ title: Donut chart
           %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);
+              createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
+        .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
+    .card.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,  colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces
@@ -222,7 +287,7 @@ title: Donut chart
               export const colorNeutral = '#e6e6e6';
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
+  .col
     .card.p-md.mb-xs
       .echarts-container#echarts-donut-testcases
     %details.listitem.mb-md
@@ -242,7 +307,7 @@ title: Donut chart
           %pre.code.break-spaces
             :plain
               import { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
+              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false,  colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces

package/src/pages/charts/gauge.haml

@@ -95,7 +95,7 @@ title: Gauge
               }
               window.addEventListener('resize', myChartGauge.resize);
             }
-.row
+.grid.gap-spacing{class:"lg:grid-cols-3"}
   .col-lg-6.col-xl-4
     .card.p-md.mb-xs
       .echarts-container#echarts-gauge-1
@@ -135,6 +135,45 @@ title: Gauge
           %pre.code.break-spaces
             :plain
               export const colorSuccess = '#8cbd24';
+  .col-lg-6.col-xl-4
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-gauge-1-dark
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize success gauge
+        .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 { createChartGauge } from './modules/echarts_gauge';
+              createChartGauge("echarts-gauge-1", dataGaugeSuccess);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataGaugeSuccess = [
+                {
+                  value: 89,
+                  name: 'Success',
+                  itemStyle: {
+                    color: colorSuccess
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorSuccess = '#8cbd24';
   .col-lg-6.col-xl-4
     .card.p-md.mb-xs
       .echarts-container#echarts-gauge-2

package/src/pages/charts/legend.haml

@@ -0,0 +1,22 @@
+---
+tags: charts
+title: Legend JS
+---
+
+.card
+  .card-body
+    %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'
+        };

package/src/pages/charts/line.haml

@@ -0,0 +1,205 @@
+---
+tags: charts
+title: Line
+---
+
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Initialize area 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 { createChartArea } from './modules/echarts_area';
+          createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor)
+    .listitem-subheadline echarts_area.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import * as echarts from 'echarts';
+          export function createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
+            var chartHeight = 190;
+            var dom = document.getElementById(target);
+            var myChartLine = echarts.init(dom, null, {
+              renderer: 'canvas',
+              useDirtyRect: false,
+              height: chartHeight
+            });
+            var optionLine;
+            var optionLine = {
+              grid: {
+                show: false,
+                zlevel: 0,
+                top: 30,
+                right: 20,
+                left: 20,
+                bottom: 30
+              },
+              xAxis: {
+                boundaryGap: false,
+                zlevel: 2,
+                data: targetDataX,
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: true,
+                  margin: 15,
+                  color: labelColor,
+                },
+                axisTick: {
+                  show: false
+                },
+              },
+              yAxis: {
+                show: false,
+                min: 0,
+                max: targetDataY
+              },
+              series: [
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    color: chartColor,
+                    borderColor: borderColor
+                  },
+                  zlevel: 1
+                },
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 1
+                  },
+                  symbol: 'circle',
+                  symbolSize: 10,
+                  itemStyle: {
+                    borderWidth: 2,
+                    color: chartColor,
+                    borderColor: borderColor
+                  },
+                  label: {
+                    show: true,
+                    color: valueColor,
+                  },
+                  zlevel: 3
+                }
+              ]
+            };
+            if (optionLine && typeof optionLine === 'object') {
+              myChartLine.setOption(optionLine);
+            }
+            window.addEventListener('resize', myChartLine.resize);
+          }
+.grid.gap-spacing{class:"lg:grid-cols-2"}
+  .col
+    .card.p-md.mb-xs
+      .echarts-container#echarts-line-1
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize area chart with blue light color
+        .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 { createChartArea } from './modules/echarts_area';
+              createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+        .listitem-subheadline dataAreaMonths.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaMonths = [
+                { value: 'Jun'},
+                { value: 'Jul'},
+                { value: 'Aug'},
+                { value: 'Sep'},
+                { value: 'Oct'},
+                { value: 'Nov'}
+              ];
+        .listitem-subheadline dataAreaValues.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaValues = [
+                { value: 79, name: 'Critical'},
+                { value: 37, name: 'High'},
+                { value: 19, name: 'Low'},
+                { value: 99, name: 'Visual'},
+                { value: 53, name: 'Content'},
+                { value: 66, name: 'UX'}
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorBlueLight = '#21bef4';
+  .col
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-line-2
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize darkmode area 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 { createChartArea } from './modules/echarts_area';
+              createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+        .listitem-subheadline dataAreaMonths.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaMonths = [
+                { value: 'Jun'},
+                { value: 'Jul'},
+                { value: 'Aug'},
+                { value: 'Sep'},
+                { value: 'Oct'},
+                { value: 'Nov'}
+              ];
+        .listitem-subheadline dataAreaValues.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaValues = [
+                { value: 79, name: 'Critical'},
+                { value: 37, name: 'High'},
+                { value: 19, name: 'Low'},
+                { value: 99, name: 'Visual'},
+                { value: 53, name: 'Content'},
+                { value: 66, name: 'UX'}
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorBlueLight = '#21bef4';

package/src/pages/colors.pug

@@ -68,7 +68,7 @@ main.main-content.main-content-padding
         p #5f656d
       .color-cell.bg-gray-dark
         p gray-dark
-        p #7c8188
+        p #888888
       .color-cell.bg-gray
         p gray
         p #9fa2a8
@@ -97,7 +97,7 @@ main.main-content.main-content-padding
         p #5f656d
       .color-cell.bg-gray-500
         p gray-500
-        p #7c8188
+        p #888888
       .color-cell.bg-gray-400
         p gray-400
         p #9fa2a8