added default example code

ACE-IoT-Solutions · Aug 19, 2020 · b210af8 · b210af8
1 parent 3da70a4
commit b210af8
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 5 deletions.
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -31,7 +31,7 @@
       { "name": "In Action", "path": "/img/ace-svg-react.png" }
     ],
     "version": "0.0.4",
-    "updated": "2020-08-18"
+    "updated": "2020-08-19"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/examples.js b/src/examples.js
diff --git a/src/examples.ts b/src/examples.ts
@@ -0,0 +1,228 @@
+import { ACESVGDefaults } from './types';
+
+export const props_defaults: ACESVGDefaults = {
+  svgNode: `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+    <svg
+       xmlns:dc="http://purl.org/dc/elements/1.1/"
+       xmlns:cc="http://creativecommons.org/ns#"
+       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+       xmlns:svg="http://www.w3.org/2000/svg"
+       xmlns="http://www.w3.org/2000/svg"
+       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+       viewBox="0 0 1203.04 193.13"
+       version="1.1"
+       id="svg4564"
+       sodipodi:docname="logo-type.svg"
+       inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+      <metadata
+         id="metadata4568">
+        <rdf:RDF>
+          <cc:Work
+             rdf:about="">
+            <dc:format>image/svg+xml</dc:format>
+            <dc:type
+               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+          </cc:Work>
+        </rdf:RDF>
+      </metadata>
+      <sodipodi:namedview
+         pagecolor="#ffffff"
+         bordercolor="#666666"
+         borderopacity="1"
+         objecttolerance="10"
+         gridtolerance="10"
+         guidetolerance="10"
+         inkscape:pageopacity="0"
+         inkscape:pageshadow="2"
+         inkscape:window-width="3840"
+         inkscape:window-height="2066"
+         id="namedview4566"
+         showgrid="false"
+         inkscape:zoom="7.2407734"
+         inkscape:cx="310.89769"
+         inkscape:cy="67.035785"
+         inkscape:window-x="-11"
+         inkscape:window-y="-11"
+         inkscape:window-maximized="1"
+         inkscape:current-layer="svg4564" />
+      <defs
+         id="defs4520">
+        <style
+           id="style4518">.cls-1{fill:#2a2e3c;}.cls-2{fill:#c1d301;}.cls-3{fill:#f6511d;}.cls-4{fill:#fff;}.cls-5{fill:#595e71;}</style>
+      </defs>
+      <rect
+         class="cls-1"
+         width="193.13"
+         height="193.13"
+         rx="16.92"
+         id="rect4522"
+         x="0"
+         y="0"
+         style="fill:#2a2e3c" />
+      <rect
+         class="cls-2"
+         x="27.82"
+         y="103.96"
+         width="28.16"
+         height="61.34"
+         rx="14.08"
+         id="rect4524"
+         style="fill:#c1d301" />
+      <rect
+         class="cls-3"
+         x="64.260002"
+         y="49.259998"
+         width="28.16"
+         height="81.010002"
+         rx="14.08"
+         id="rect4526"
+         style="fill:#f6511d" />
+      <rect
+         class="cls-2"
+         x="100.71"
+         y="76.190002"
+         width="28.16"
+         height="65.349998"
+         rx="14.08"
+         id="rect4528"
+         style="fill:#c1d301" />
+      <rect
+         class="cls-3"
+         x="137.14999"
+         y="27.82"
+         width="28.16"
+         height="83.019997"
+         rx="14.08"
+         id="rect4530"
+         style="fill:#f6511d" />
+      <path
+         class="cls-4"
+         d="m 27.82,51.8 a 2.1,2.1 0 0 1 -2.1,-2.09 V 27.83 a 2.1,2.1 0 0 1 2.1,-2.09 h 21.87 a 2.1,2.1 0 1 1 0,4.19 H 29.91 v 19.78 a 2.1,2.1 0 0 1 -2.09,2.09 z"
+         id="path4532"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         class="cls-4"
+         d="m 165.31,167.4 h -21.87 a 2.1,2.1 0 1 1 0,-4.19 h 19.78 v -19.78 a 2.1,2.1 0 1 1 4.19,0 v 21.87 a 2.1,2.1 0 0 1 -2.1,2.1 z"
+         id="path4534"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         class="cls-4"
+         d="m 155.15,64 h -7.84 a 1.39,1.39 0 0 0 -1.4,1.4 v 7.84 a 1.38,1.38 0 0 0 1.4,1.39 h 1.59 c -1,12 -5.59,21.69 -13.13,27.54 a 23.75,23.75 0 0 1 -20.45,4.65 c -6.12,-1.56 -9.46,-4.94 -13,-8.51 -5.2,-5.24 -10.57,-10.64 -23.93,-10.64 -17.53,0 -36.26,13.07 -38.34,41.62 v 0 H 38 a 1.38,1.38 0 0 0 -1.39,1.4 v 7.83 A 1.38,1.38 0 0 0 38,140 h 7.84 a 1.39,1.39 0 0 0 1.4,-1.4 v -7.83 a 1.39,1.39 0 0 0 -1.4,-1.4 h -1.63 v 0 c 1.95,-25.81 18.11,-37.45 34.14,-37.45 11.61,0 16.16,4.58 21,9.42 3.8,3.84 7.74,7.78 15,9.63 a 27.89,27.89 0 0 0 24.06,-5.4 c 8.55,-6.66 13.72,-17.49 14.76,-30.86 h 2.05 a 1.37,1.37 0 0 0 1.39,-1.39 V 65.41 A 1.38,1.38 0 0 0 155.15,64 Z"
+         id="path4536"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         class="cls-4"
+         d="m 153.26,71.88 c 0,0.94 -0.06,1.85 -0.16,2.76 -1,13.37 -6.21,24.2 -14.76,30.86 a 27.89,27.89 0 0 1 -24.06,5.4 c -7.22,-1.85 -11.16,-5.79 -15,-9.63 -4.81,-4.84 -9.36,-9.42 -21,-9.42 -16,0 -32.19,11.64 -34.14,37.45 -0.07,0.91 -0.13,1.86 -0.13,2.8 h -4.2 c 0,-0.94 0.07,-1.89 0.13,-2.8 2.08,-28.55 20.81,-41.62 38.34,-41.62 13.36,0 18.73,5.4 23.93,10.64 3.57,3.57 6.92,7 13,8.51 a 23.75,23.75 0 0 0 20.45,-4.65 c 7.54,-5.85 12.13,-15.54 13.13,-27.54 0.1,-0.91 0.13,-1.85 0.17,-2.76 z"
+         id="path4538"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <rect
+         class="cls-4"
+         x="145.91"
+         y="64.010002"
+         width="10.63"
+         height="10.63"
+         rx="1.4"
+         id="rect4540"
+         style="fill:#ffffff" />
+      <rect
+         class="cls-3"
+         x="148.67999"
+         y="66.809998"
+         width="5.0700002"
+         height="5.0700002"
+         id="rect4542"
+         style="fill:#f6511d" />
+      <rect
+         class="cls-4"
+         x="36.59"
+         y="129.32001"
+         width="10.63"
+         height="10.63"
+         rx="1.4"
+         id="rect4544"
+         style="fill:#ffffff" />
+      <rect
+         class="cls-2"
+         x="39.349998"
+         y="132.11"
+         width="5.0700002"
+         height="5.0700002"
+         id="rect4546"
+         style="fill:#c1d301" />
+      <path
+         class="cls-5"
+         d="m 338.53,130.92 h -71.14 l -12.61,24.89 H 226 L 288.41,38.1 h 29.43 l 62.39,117.71 h -29.09 z m -11.27,-21.86 -24.39,-47.93 -24.38,47.93 z"
+         id="path4548"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 503.16,117.13 24.55,12.28 c -11.1,16.65 -33.8,30.1 -64.58,30.1 -44.22,0 -73,-23.37 -73,-62.56 0,-39.19 28.78,-62.55 74.18,-62.55 29.6,0 52.3,13.62 63.06,29.93 l -24.72,12.28 c -8.4,-13.12 -21.19,-19 -38.67,-19 -27.92,0 -46.42,13.46 -46.42,39.35 0,25.89 18.5,39.36 46.42,39.36 17.48,-0.01 30.43,-5.73 39.18,-19.19 z"
+         id="path4550"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 677.54,133.28 v 22.53 H 556.29 V 38.1 H 675.86 V 60.63 H 583 v 24.22 h 77.53 v 22.53 H 583 v 25.9 z"
+         id="path4552"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 702.26,143.87 c 0,-7.9 6.55,-14.12 16,-14.12 9.25,0 15.81,6.22 15.81,14.12 0,8.07 -6.56,14 -15.81,14 -9.45,-0.04 -16,-5.93 -16,-14 z"
+         id="path4554"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 892.28,120.16 c 0,23.21 -22,39.35 -63.74,39.35 -29.76,0 -54,-8.41 -72,-23.71 L 772,117.47 c 14.5,13.29 33.17,19.53 57.22,19.53 23.88,0 36,-4.54 36,-14.3 0,-9.76 -12.12,-12.46 -39.22,-14.82 C 792.39,105 761.11,97.63 761.11,72.4 c 0,-24.55 26.23,-38 62.56,-38 25.73,0 47.93,6.39 62.89,18 l -14.8,18.67 c -12.94,-9.93 -28.92,-14 -48.09,-14.13 -16,-0.17 -35.49,2.69 -35.49,13.45 0,10.09 16.82,11.1 40.2,13 37.5,2.97 63.9,10.87 63.9,36.77 z"
+         id="path4556"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 931.29,38.1 44.4,91 44.22,-91 H 1049 L 989.64,155.81 H 961.22 L 901.86,38.1 Z"
+         id="path4558"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+      <path
+         class="cls-5"
+         d="m 1203,131.93 c -11.77,16 -35,27.58 -66.93,27.58 -47.25,0 -76,-23.2 -76,-62.56 0,-39.36 28.76,-62.55 76,-62.55 28.93,0 49.44,10.93 61.21,22.36 l -21,15.31 c -10.26,-10.09 -22.2,-14.8 -40,-14.8 -30.78,0 -48.77,13.45 -48.77,39.68 0,26.23 18.5,39.69 49.78,39.69 17.66,0 32.12,-3.87 40.53,-14 v -11.39 h -44.4 V 89.39 H 1203 Z"
+         id="path4560"
+         inkscape:connector-curvature="0"
+         style="fill:#595e71" />
+    </svg>
+    `,
+  initSource: ``,
+  eventSource: `
+let valueCount = data.series[0].fields[1].values.length;
+let chartData = [];
+for (let i=0; i<valueCount; i+=(Math.floor(valueCount / 4)-1)) {
+    chartData.push(data.series[0].fields[1].values.buffer[i])
+}
+let minData = chartData.reduce((acc, val) => {
+    return Math.min(acc, val);
+});
+let maxData = 1.05 * chartData.reduce((acc, val) => {
+    return Math.max(acc, val);
+});
+let spread = maxData - minData;
+let iconHeight = svgmap.iconbg.height();
+let iconY = svgmap.iconbg.y();
+[svgmap.barOne, svgmap.barTwo, svgmap.barThree, svgmap.barFour].forEach((elem) => {
+    elem.animate(1000).ease('<>').move(elem.x(),  ((iconHeight * (chartData[0] / maxData)) - elem.height())).loop(0, true);    
+})`,
+  svgMappings: [
+    { mappedName: 'barTwo', svgId: 'rect4526' },
+    { mappedName: 'barThree', svgId: 'rect4528' },
+    { mappedName: 'barFour', svgId: 'rect4530' },
+    { mappedName: 'iconbg', svgId: 'rect4522' },
+    { mappedName: 'spline', svgId: 'path4538' },
+    { mappedName: 'barOne', svgId: 'rect4524' },
+  ],
+};
diff --git a/src/options.tsx b/src/options.tsx
@@ -19,6 +19,7 @@ import Editor from '@monaco-editor/react';
 import { css } from 'emotion';
 import { config } from '@grafana/runtime';
 import { ACESVGOptions, SVGIDMapping } from './types';
+import { props_defaults } from 'examples';
 // import { Input, stylesFactory, Icon, HorizontalGroup, Label, VerticalGroup, useTheme } from '@grafana/ui';
 import { Input, stylesFactory, Icon, HorizontalGroup, Label, VerticalGroup } from '@grafana/ui';
 
@@ -206,6 +207,7 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<ACESVGOptions>
       path: 'svgSource',
       name: 'SVG Document',
       id: 'svgSource',
+      defaultValue: props_defaults.svgNode,
       editor: props => {
         const grafanaTheme = config.theme.name;
         return (
@@ -229,6 +231,7 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<ACESVGOptions>
       path: 'eventSource',
       name: 'User JS Render Code',
       id: 'eventSource',
+      defaultValue: props_defaults.eventSource,
       editor: props => {
         const grafanaTheme = config.theme.name;
         return (
@@ -252,6 +255,7 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<ACESVGOptions>
       path: 'initSource',
       name: 'User JS Init Code',
       id: 'initSource',
+      defaultValue: props_defaults.initSource,
       editor: props => {
         const grafanaTheme = config.theme.name;
         return (
@@ -275,7 +279,7 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<ACESVGOptions>
       id: 'svgMappings',
       path: 'svgMappings',
       name: 'SVG Mappings',
-      defaultValue: [],
+      defaultValue: props_defaults.svgMappings,
       editor: SvgMappings,
     });
 };

diff --git a/src/types.ts b/src/types.ts
@@ -12,3 +12,9 @@ export interface ACESVGOptions {
   initAutocomplete: boolean;
   svgMappings: SVGIDMapping[];
 }
+export interface ACESVGDefaults {
+  svgNode: string;
+  initSource: string;
+  eventSource: string;
+  svgMappings: SVGIDMapping[];
+}