testio-tailwind 0.2.0 → 0.2.1

package/src/pages/charts/gauge.haml

@@ -1,215 +1,215 @@
----
-tags: charts
-title: Gauge
----
-
-.div
-  %details.listitem.mb-md
-    %summary.listitem-header
-      .listitem-title
-        %span.icon.icon-format-code.mr-xs
-        Initialize 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 (target, targetData)
-      .listitem-subheadline echarts_gauge.js
-      .listitem-card
-        %pre.code.break-spaces
-          :plain
-            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);
-            }
-.row
-  .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-gauge-1
-    %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.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-gauge-2
-    %details.listitem.mb-md
-      %summary.listitem-header
-        .listitem-title
-          %span.icon.icon-format-code.mr-xs
-          Initialize danger 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 dataGaugeDanger = [
-                {
-                  value: 23,
-                  name: 'Danger',
-                  itemStyle: {
-                    color: colorDanger
-                  }
-                },
-              ];
-        .listitem-subheadline colors.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
-              export const colorDanger = '#FF3131';
-  .col-lg-6.col-xl-4
-    .card.bg-gray-lightest.p-md.mb-xs
-      .echarts-container#echarts-gauge-3
-    %details.listitem.mb-md
-      %summary.listitem-header
-        .listitem-title
-          %span.icon.icon-format-code.mr-xs
-          Initialize info 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 dataGaugeInfo = [
-                {
-                  value: 50,
-                  name: 'Info',
-                  itemStyle: {
-                    color: colorInfo
-                  }
-                },
-              ];
-        .listitem-subheadline colors.js
-        .listitem-card
-          %pre.code.break-spaces
-            :plain
+---
+tags: charts
+title: Gauge
+---
+
+.div
+  %details.listitem.mb-md
+    %summary.listitem-header
+      .listitem-title
+        %span.icon.icon-format-code.mr-xs
+        Initialize 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 (target, targetData)
+      .listitem-subheadline echarts_gauge.js
+      .listitem-card
+        %pre.code.break-spaces
+          :plain
+            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);
+            }
+.row
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-1
+    %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.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-2
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize danger 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 dataGaugeDanger = [
+                {
+                  value: 23,
+                  name: 'Danger',
+                  itemStyle: {
+                    color: colorDanger
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorDanger = '#FF3131';
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-3
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize info 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 dataGaugeInfo = [
+                {
+                  value: 50,
+                  name: 'Info',
+                  itemStyle: {
+                    color: colorInfo
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
               export const colorInfo = '#326dd1';

package/src/pages/charts/index.njk

@@ -1,7 +1,7 @@
----
-layout: base
-permalink: charts/
----
-
-{% set collection = collections.charts %}
+---
+layout: base
+permalink: charts/
+---
+
+{% set collection = collections.charts %}
 {% include "page-with-sidebar-nocode.njk" %}

package/src/pages/ci.pug

@@ -1,8 +1,8 @@
----
-layout: base
-permalink: "|/ci/"
----
-
-main.main-content.main-content-padding
-
-  h1.mb-heading-lg Corporate identity
+---
+layout: base
+permalink: "|/ci/"
+---
+
+main.main-content.main-content-padding
+
+  h1.mb-heading-lg Corporate identity