testio-tailwind 3.2.0 → 3.4.0

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