testio-tailwind 3.3.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/assets/scripts/app.js

@@ -121,30 +121,36 @@ document.addEventListener("trix-before-initialize", () => {
 
 ////// ECharts //////
 
-import { colorBlueLight, colorInfo } from './modules/colors';
+import { colorBlueLight, colorInfo, colorSuccess, colorLabelBright, colorTealLight, colorLabelDark, colorValueBright, colorValueDark, colorBorderBright, colorBorderDark, colorNeutralBright, colorNeutralDark } from './modules/colors';
 import { createChartHorizontal } from './modules/echarts_horizontal';
 import { createChartDonut } from './modules/echarts_donut';
 import { createChartGauge } from './modules/echarts_gauge';
 import { createChartArea } from './modules/echarts_area';
 import { createChartVertical } from './modules/echarts_vertical';
+import { createChartLine } from './modules/echarts_line';
 
 import { echartsSeriesFew, echartsSeriesMany } from './modules/echarts_exampleseries';
 
 import { dataFeaturesFew, dataFeaturesMany, dataBugs, dataBugsFew, dataBugsCategories, dataBugsCategoriesFew, dataTestCases, dataGaugeSuccess, dataGaugeDanger, dataGaugeInfo, dataAreaValues, dataAreaMonths, dataFeaturesManyNumbers } from './modules/echarts_exampledata';
 
-createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories);
-createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew);
-createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany);
-createChartVertical("echarts-bar-vertical-1-fixed", dataBugs, dataBugsCategories, 10);
-createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, 10);
-createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, 10);
-createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false);
-createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true);
-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);
-createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
-createChartGauge("echarts-gauge-1", dataGaugeSuccess);
-createChartGauge("echarts-gauge-2", dataGaugeDanger);
-createChartGauge("echarts-gauge-3", dataGaugeInfo);
-createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight);
-createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorInfo);
+createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-1-dark", dataBugs, dataBugsCategories, colorLabelDark, colorValueDark);
+createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright, 10);
+createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright,10);
+createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false, colorLabelBright, colorValueBright);
+createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true, colorLabelBright, colorValueBright);
+createChartHorizontal("echarts-bar-horizontal-2-dark", dataFeaturesMany, echartsSeriesMany, true, colorLabelDark, colorValueDark);
+createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false,  colorLabelBright, colorValueBright);
+createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
+createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
+createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false,  colorLabelBright, colorValueBright);
+createChartGauge("echarts-gauge-1", dataGaugeSuccess, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartGauge("echarts-gauge-1-dark", dataGaugeSuccess, colorLabelDark, colorValueDark, colorNeutralDark);
+createChartGauge("echarts-gauge-2", dataGaugeDanger, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartGauge("echarts-gauge-3", dataGaugeInfo, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);

package/src/assets/scripts/modules/colors.js

@@ -6,6 +6,14 @@ export const colorContent = '#326dd1';
 export const colorUX = '#263340';
 export const colorSuccess = '#8cbd24';
 export const colorDanger = '#FF3131';
-export const colorNeutral = '#e6e6e6';
+export const colorNeutralBright = '#bfc1c5';
+export const colorNeutralDark = '#343A40';
 export const colorInfo = '#326dd1';
-export const colorBlueLight = '#21bef4';
+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/assets/scripts/modules/echarts_area.js

@@ -2,7 +2,7 @@
 
 import * as echarts from 'echarts';
 
-export function createChartArea (target, targetDataX, targetDataY, chartColor) {
+export function createChartArea (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
   var chartHeight = 190;
   var dom = document.getElementById(target);
   var myChartArea = echarts.init(dom, null, {
@@ -29,7 +29,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
       },
       axisLabel: {
         show: true,
-        margin: 15
+        margin: 15,
+        color: labelColor,
       },
       axisTick: {
         show: false
@@ -37,7 +38,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dashed'
+          type: 'dashed',
+          color: borderColor
         }
       }
     },
@@ -52,7 +54,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
         type: 'line',
         lineStyle: {
           width: 1,
-          color: chartColor
+          color: chartColor,
+          borderColor: borderColor
         },
         areaStyle: {
           opacity: 1,
@@ -71,10 +74,11 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
         itemStyle: {
           borderWidth: 2,
           color: chartColor,
-          borderColor: '#ffffff'
+          borderColor: borderColor
         },
         label: {
-          show: true
+          show: true,
+          color: valueColor,
         },
         areaStyle: {
           opacity: 0

package/src/assets/scripts/modules/echarts_donut.js

@@ -4,12 +4,26 @@ 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
@@ -37,14 +51,16 @@ export function createChartDonut (target, targetData, valueText, labelText, show
       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: {

package/src/assets/scripts/modules/echarts_exampledata.js

@@ -1,4 +1,4 @@
-import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutralBright } from './colors';
 
 export let dataAreaValues = [
   { value: 79, name: 'Critical'},
@@ -102,5 +102,5 @@ export let dataGaugeInfo = [
 export let dataTestCases = [
   { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
   { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
-  { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
+  { value: 27, name: 'Open', itemStyle: {color: colorNeutralBright}},
 ];

package/src/assets/scripts/modules/echarts_gauge.js

@@ -1,9 +1,8 @@
 ////// Gauge chart
 
 import * as echarts from 'echarts';
-import { colorSuccess, colorDanger, colorNeutral } from './colors';
 
-export function createChartGauge (target, targetData) {
+export function createChartGauge (target, targetData, labelColor, valueColor, neutralColor) {
   var chartHeight = 190;
   var dom = document.getElementById(target);
   var myChartGauge = echarts.init(dom, null, {
@@ -33,7 +32,7 @@ export function createChartGauge (target, targetData) {
           lineStyle: {
             width: 10,
             color: [
-              [1, colorNeutral ]
+              [1, neutralColor ]
             ]
           }
         },
@@ -53,7 +52,7 @@ export function createChartGauge (target, targetData) {
           offsetCenter: [0, 35],
           fontSize: 11,
           lineHeight: 12,
-          color: inherit,
+          color: labelColor,
         },
         detail: {
           top: 10,
@@ -61,7 +60,8 @@ export function createChartGauge (target, targetData) {
           formatter: '{value}%',
           fontSize: 60,
           lineHeight: 60,
-          fontWeight: "lighter"
+          fontWeight: "lighter",
+          color: valueColor,
         }
       }
     ]

package/src/assets/scripts/modules/echarts_horizontal.js

@@ -4,12 +4,26 @@ import * as echarts from 'echarts';
 import { echartsLegend, legendHeight } from './echarts_legend';
 
 var legendOptions;
-export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
+export function createChartHorizontal (target, targetData, targetSeries, showLegend, labelColor, valueColor) {
   var chartHeight = targetData.length * 20;
   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 + 0,
     legendOptions = null
@@ -67,7 +81,8 @@ export function createChartHorizontal (target, targetData, targetSeries, showLeg
         overflow: "truncate",
         ellipsis: '…',
         hideOverlap: false,
-        interval: 0
+        interval: 0,
+        color: labelColor,
       }
     },
     series: targetSeries

package/src/assets/scripts/modules/echarts_line.js

@@ -0,0 +1,84 @@
+////// Line chart
+
+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);
+}
+
+

package/src/assets/scripts/modules/echarts_vertical.js

@@ -2,7 +2,7 @@
 
 import * as echarts from 'echarts';
 
-export function createChartVertical (target, targetDataY, targetDataX, itemWidth) {
+export function createChartVertical (target, targetDataY, targetDataX, labelColor, valueColor, itemWidth) {
   var chartHeight = 200;
   var labelHeight = 20;
   var dom = document.getElementById(target);
@@ -50,7 +50,8 @@ export function createChartVertical (target, targetDataY, targetDataX, itemWidth
         overflow: "truncate",
         ellipsis: '…',
         hideOverlap: true,
-        interval: 0
+        interval: 0,
+        color: labelColor,
       }
     },
     yAxis: {
@@ -66,7 +67,8 @@ export function createChartVertical (target, targetDataY, targetDataX, itemWidth
           show: true,
           position: 'center',
           verticalAlign: 'top',
-          offset: [0, -15]
+          offset: [0, -15],
+          color: valueColor,
         }
       }
     ]

package/src/assets/stylesheets/components/customer/customer_productcards.css

@@ -165,12 +165,12 @@
   @apply inline-block h-icon bg-primary;
   content: "";
   width: 14px;
-  mask-image: url("/assets/images/arrow-down.svg");
+  mask-image: url("/assets/images/icons/arrow-down.svg");
   mask-repeat: no-repeat;
 }
 
 details.card-section[open] .btn-collapse::before {
-  mask-image: url("/assets/images/arrow-up.svg");
+  mask-image: url("/assets/images/icons/arrow-up.svg");
 }
 
 details.card-section[open] .card-section-header {

package/src/assets/stylesheets/components/list_item.css

@@ -149,6 +149,10 @@ a.listitem:hover {
   @apply max-w-full;
 }
 
+.listitem-card pre {
+  @apply whitespace-break-spaces select-all;
+}
+
 .listitem-subheadline {
   @apply mb-xs text-label font-semibold uppercase;
 }

package/src/assets/stylesheets/tailwind_config.css

@@ -8,7 +8,7 @@
   --color-gray-200: #e6e6e6;
   --color-gray-300: #bfc1c5;
   --color-gray-400: #9fa2a8;
-  --color-gray-500: #7c8188;
+  --color-gray-500: #888888;
   --color-gray-600: #5f656d;
   --color-gray-700: #343A40;
   --color-gray-800: #262626;
@@ -17,7 +17,7 @@
   --color-gray-lighter: #e6e6e6;
   --color-gray-light: #bfc1c5;
   --color-gray-DEFAULT: #9fa2a8;
-  --color-gray-dark: #7c8188;
+  --color-gray-dark: #888888;
   --color-gray-darker: #5f656d;
   --color-gray-darkest: #262626;
   --color-red-200: #FF3131;

package/src/pages/charts/area.haml

@@ -5,7 +5,7 @@ title: Area
 
 %details.listitem.mb-md
   %summary.listitem-header
-    .listitem-title
+    .listitem-title.flex.items-center
       %span.icon.icon-format-code.mr-xs
       Initialize area chart
     .listitem-metrics
@@ -20,13 +20,13 @@ title: Area
       %pre.code.break-spaces
         :plain
           import { createChartArea } from './modules/echarts_area';
-          createChartArea (target, targetDataX, targetDataY, chartColor);
+          createChartArea (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 createChartArea (target, targetDataX, targetDataY, chartColor) {
+          export function createChartArea (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
             var chartHeight = 190;
             var dom = document.getElementById(target);
             var myChartArea = echarts.init(dom, null, {
@@ -53,7 +53,8 @@ title: Area
                 },
                 axisLabel: {
                   show: true,
-                  margin: 15
+                  margin: 15,
+                  color: labelColor,
                 },
                 axisTick: {
                   show: false
@@ -61,7 +62,8 @@ title: Area
                 splitLine: {
                   show: true,
                   lineStyle: {
-                    type: 'dashed'
+                    type: 'dashed',
+                    color: borderColor
                   }
                 }
               },
@@ -76,7 +78,8 @@ title: Area
                   type: 'line',
                   lineStyle: {
                     width: 1,
-                    color: chartColor
+                    color: chartColor,
+                    borderColor: borderColor
                   },
                   areaStyle: {
                     opacity: 1,
@@ -95,10 +98,11 @@ title: Area
                   itemStyle: {
                     borderWidth: 2,
                     color: chartColor,
-                    borderColor: '#ffffff'
+                    borderColor: borderColor
                   },
                   label: {
-                    show: true
+                    show: true,
+                    color: valueColor,
                   },
                   areaStyle: {
                     opacity: 0
@@ -112,13 +116,13 @@ title: Area
             }
             window.addEventListener('resize', myChartArea.resize);
           }
-.row
+.grid.gap-spacing{class:"lg:grid-cols-2"}
   .col-xl-6
     .card.p-md.mb-xs
       .echarts-container#echarts-area-1
-    %details.listitem.mb-md
+    %details.listitem
       %summary.listitem-header
-        .listitem-title
+        .listitem-title.flex.items-center
           %span.icon.icon-format-code.mr-xs
           Initialize area chart with blue light color
         .listitem-metrics
@@ -133,7 +137,7 @@ title: Area
           %pre.code.break-spaces
             :plain
               import { createChartArea } from './modules/echarts_area';
-              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight);
+              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
         .listitem-subheadline dataAreaMonths.js
         .listitem-card
           %pre.code.break-spaces
@@ -164,13 +168,13 @@ title: Area
             :plain
               export const colorBlueLight = '#21bef4';
   .col-xl-6
-    .card.mb-xs.p-xs
+    .card.mb-xs.p-md.bg-gray-800
       .echarts-container#echarts-area-2
-    %details.listitem.mb-md
+    %details.listitem
       %summary.listitem-header
-        .listitem-title
+        .listitem-title.flex.items-center
           %span.icon.icon-format-code.mr-xs
-          Initialize area chart with blue light color
+          Initialize darkmode area chart 
         .listitem-metrics
         .listitem-actions
           .btn.collapse-btn
@@ -183,7 +187,7 @@ title: Area
           %pre.code.break-spaces
             :plain
               import { createChartArea } from './modules/echarts_area';
-              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorInfo);
+              createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
         .listitem-subheadline dataAreaMonths.js
         .listitem-card
           %pre.code.break-spaces