testio-tailwind 0.2.0 → 0.2.1

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

@@ -1,146 +1,146 @@
-import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
-
-var barType = 'bar';
-var stackType = 'stack';
-var barWidth = 0;
-var barMaxWidth = 10;
-var barGap = 0;
-var barCategoryGap = 0;
-
-export let echartsSeriesFew = [
-  {
-    name: 'Critical',
-    itemStyle: {color: colorCritical},
-    type: barType,
-    stack: stackType,
-    barWidth: barWidth,
-    barMaxWidth: barMaxWidth,
-    barGap: barGap,
-    barCategoryGap: barCategoryGap,
-    emphasis: {
-      focus: 'series'
-    },
-    data: [7, 22, 1]
-  },
-  {
-    name: 'High',
-    itemStyle: {color: colorHigh},
-    type: barType,
-    stack: stackType,
-    barWidth: barWidth,
-    barMaxWidth: barMaxWidth,
-    barGap: barGap,
-    barCategoryGap: barCategoryGap,
-    emphasis: {
-      focus: 'series'
-    },
-    data: [23, 21, 13]
-  },
-  {
-    name: 'Low',
-    itemStyle: {color: colorLow},
-    type: barType,
-    stack: stackType,
-    barWidth: barWidth,
-    barMaxWidth: barMaxWidth,
-    barGap: barGap,
-    barCategoryGap: barCategoryGap,
-    emphasis: {
-      focus: 'series'
-    },
-    data: [9, 15, 4]
-  }
-];
-
-export let echartsSeriesMany = [
-    {
-      name: 'Critical',
-      itemStyle: {color: colorCritical},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [7, 22, 1, 9, 15, 4, 11, 0]
-    },
-    {
-      name: 'High',
-      itemStyle: {color: colorHigh},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [23, 21, 13, 0, 1, 9, 15, 4]
-    },
-    {
-      name: 'Low',
-      itemStyle: {color: colorLow},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [9, 15, 4, 11, 23, 13, 2, 1]
-    },
-    {
-      name: 'Visual',
-      itemStyle: {color: colorVisual},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [13, 14, 1, 9, 15, 4, 11, 10]
-    },
-    {
-      name: 'Content',
-      itemStyle: {color: colorContent},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [13, 22, 1, 9, 15, 4, 8, 13]
-    },
-    {
-      name: 'UX',
-      itemStyle: {color: colorUX},
-      type: barType,
-      stack: stackType,
-      barWidth: barWidth,
-      barMaxWidth: barMaxWidth,
-      barGap: barGap,
-      barCategoryGap: barCategoryGap,
-      emphasis: {
-        focus: 'series'
-      },
-
-      data: [13, 0, 1, 9, 15, 4, 2, 3]
-    }
-  ];
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
+
+var barType = 'bar';
+var stackType = 'stack';
+var barWidth = 0;
+var barMaxWidth = 10;
+var barGap = 0;
+var barCategoryGap = 0;
+
+export let echartsSeriesFew = [
+  {
+    name: 'Critical',
+    itemStyle: {color: colorCritical},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [7, 22, 1]
+  },
+  {
+    name: 'High',
+    itemStyle: {color: colorHigh},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [23, 21, 13]
+  },
+  {
+    name: 'Low',
+    itemStyle: {color: colorLow},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [9, 15, 4]
+  }
+];
+
+export let echartsSeriesMany = [
+    {
+      name: 'Critical',
+      itemStyle: {color: colorCritical},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [7, 22, 1, 9, 15, 4, 11, 0]
+    },
+    {
+      name: 'High',
+      itemStyle: {color: colorHigh},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [23, 21, 13, 0, 1, 9, 15, 4]
+    },
+    {
+      name: 'Low',
+      itemStyle: {color: colorLow},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [9, 15, 4, 11, 23, 13, 2, 1]
+    },
+    {
+      name: 'Visual',
+      itemStyle: {color: colorVisual},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 14, 1, 9, 15, 4, 11, 10]
+    },
+    {
+      name: 'Content',
+      itemStyle: {color: colorContent},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 22, 1, 9, 15, 4, 8, 13]
+    },
+    {
+      name: 'UX',
+      itemStyle: {color: colorUX},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 0, 1, 9, 15, 4, 2, 3]
+    }
+  ];

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

@@ -1,74 +1,74 @@
-////// Gauge chart
-
-import * as echarts from 'echarts';
-import { colorSuccess, colorDanger, colorNeutral } from './colors';
-
-export function createChartGauge (target, targetData) {
-  var chartHeight = 190;
-  var dom = document.getElementById(target);
-  var myChartGauge = echarts.init(dom, null, {
-    renderer: 'canvas',
-    useDirtyRect: false,
-    height: chartHeight
-  });
-  var optionGauge;
-  var optionGauge = {
-    series: [
-      {
-        type: 'gauge',
-        radius: ['90'],
-        startAngle: 90,
-        endAngle: -270,
-        
-        pointer: {
-          show: false
-        },
-        progress: {
-          show: true,
-          overlap: false,
-          clip: false
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            width: 10,
-            color: [
-              [1, colorNeutral ]
-            ]
-          }
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          show: false,
-          distance: 50
-        },
-        data: targetData,
-        title: {
-          top: 0,
-          offsetCenter: [0, 35],
-          fontSize: 11,
-          lineHeight: 12
-        },
-        detail: {
-          top: 10,
-          offsetCenter: [0, 0],
-          formatter: '{value}%',
-          fontSize: 60,
-          lineHeight: 60,
-          fontWeight: "lighter"
-        }
-      }
-    ]
-  };
-  
-  if (optionGauge && typeof optionGauge === 'object') {
-    myChartGauge.setOption(optionGauge);
-  }
-  
-  window.addEventListener('resize', myChartGauge.resize);
-}
+////// Gauge chart
+
+import * as echarts from 'echarts';
+import { colorSuccess, colorDanger, colorNeutral } from './colors';
+
+export function createChartGauge (target, targetData) {
+  var chartHeight = 190;
+  var dom = document.getElementById(target);
+  var myChartGauge = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartHeight
+  });
+  var optionGauge;
+  var optionGauge = {
+    series: [
+      {
+        type: 'gauge',
+        radius: ['90'],
+        startAngle: 90,
+        endAngle: -270,
+        
+        pointer: {
+          show: false
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          clip: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 10,
+            color: [
+              [1, colorNeutral ]
+            ]
+          }
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false,
+          distance: 50
+        },
+        data: targetData,
+        title: {
+          top: 0,
+          offsetCenter: [0, 35],
+          fontSize: 11,
+          lineHeight: 12
+        },
+        detail: {
+          top: 10,
+          offsetCenter: [0, 0],
+          formatter: '{value}%',
+          fontSize: 60,
+          lineHeight: 60,
+          fontWeight: "lighter"
+        }
+      }
+    ]
+  };
+  
+  if (optionGauge && typeof optionGauge === 'object') {
+    myChartGauge.setOption(optionGauge);
+  }
+  
+  window.addEventListener('resize', myChartGauge.resize);
+}

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

@@ -1,80 +1,80 @@
-////// Horizontal chart
-
-import * as echarts from 'echarts';
-import { echartsLegend, legendHeight } from './echarts_legend';
-
-var legendOptions;
-export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
-  var chartHeight = targetData.length * 20;
-  var chartPlusLegendHeight;
-  if (showLegend) {
-    chartPlusLegendHeight = chartHeight + legendHeight,
-    legendOptions = echartsLegend
-  } else {
-    chartPlusLegendHeight = chartHeight + 0,
-    legendOptions = null
-  }
-  var dom = document.getElementById(target);
-  var myChartHorizontal = echarts.init(dom, null, {
-    renderer: 'canvas',
-    useDirtyRect: false,
-    height: chartPlusLegendHeight
-  });
-  var optionHorizontal;
-  var optionHorizontal = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    legend: legendOptions,
-    grid: {
-      height: chartHeight,
-      top: 0,
-      left: '12',
-      right: '10',
-      bottom: 0,
-      containLabel: true,
-      align: 'top'
-    },
-    xAxis: {
-      type: 'value',
-      axisTick: {
-        show: false
-        },
-      axisLine: {
-        show: false
-      },
-      axisLabel: {
-        show: false
-      },
-      splitLine: {
-        show: false
-      }
-    },
-    yAxis: {
-      data: targetData,
-      scale: false,
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        show: false
-      },
-      axisLabel: {
-        show: true,
-        overflow: "truncate",
-        ellipsis: '…',
-        hideOverlap: false,
-        interval: 0
-      }
-    },
-    series: targetSeries
-  };
-  
-  if (optionHorizontal && typeof optionHorizontal === 'object') {
-    myChartHorizontal.setOption(optionHorizontal);
-  }
-  window.addEventListener('resize', myChartHorizontal.resize);
-}
+////// Horizontal chart
+
+import * as echarts from 'echarts';
+import { echartsLegend, legendHeight } from './echarts_legend';
+
+var legendOptions;
+export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
+  var chartHeight = targetData.length * 20;
+  var chartPlusLegendHeight;
+  if (showLegend) {
+    chartPlusLegendHeight = chartHeight + legendHeight,
+    legendOptions = echartsLegend
+  } else {
+    chartPlusLegendHeight = chartHeight + 0,
+    legendOptions = null
+  }
+  var dom = document.getElementById(target);
+  var myChartHorizontal = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartPlusLegendHeight
+  });
+  var optionHorizontal;
+  var optionHorizontal = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: legendOptions,
+    grid: {
+      height: chartHeight,
+      top: 0,
+      left: '12',
+      right: '10',
+      bottom: 0,
+      containLabel: true,
+      align: 'top'
+    },
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+        },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    yAxis: {
+      data: targetData,
+      scale: false,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        overflow: "truncate",
+        ellipsis: '…',
+        hideOverlap: false,
+        interval: 0
+      }
+    },
+    series: targetSeries
+  };
+  
+  if (optionHorizontal && typeof optionHorizontal === 'object') {
+    myChartHorizontal.setOption(optionHorizontal);
+  }
+  window.addEventListener('resize', myChartHorizontal.resize);
+}

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

@@ -1,13 +1,13 @@
-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'
+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'
 };