VueUiGalaxy added component

Author: graphieros

README.md

@@ -13,7 +13,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-39-green)
+![Static Badge](https://img.shields.io/badge/components-40-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -23,45 +23,46 @@ Available components:
 
 ## Charts
 
-- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
+- [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid)
+- [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick)
+- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)
+- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
 - [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)
-- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
-- [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)
-- [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant)
+- [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy)
 - [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge)
-- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)
-- [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion)
-- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
 - [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)
-- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
-- [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick)
-- [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid)
+- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
+- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
+- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)
+- [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion)
+- [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant)
+- [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)
 - [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)
-- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
 - [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
-- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
+- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
+- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
 - [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
-- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
-- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
-- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
-- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)
+- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
+- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
+- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
+- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
 
 ## Mini charts
 
-- [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
-- [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)
-- [VueUiSparkstackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
 - [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram)
+- [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)
 - [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge)
+- [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
+- [VueUiSparkstackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
 
 ## 3d
 
 - [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)
 
 ## Tables
 
-- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
 - [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
+- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
 
 ## Rating
 
@@ -70,13 +71,13 @@ Available components:
 
 ## Utilities
 
-- [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
-- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
-- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
 - [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
-- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
+- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
 - [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
+- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
 - [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
+- [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
+- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
 
 # Installation
 

package-lock.json

@@ -1,44 +1,45 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.44",
+  "version": "2.0.45",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
+    "3d bar",
     "Vue",
-    "data visualization",
+    "accelerometer",
+    "age pyramid",
+    "annotator",
+    "candlestick",
     "chart",
-    "graph",
+    "dashboard",
+    "data visualization",
+    "donut evolution",
     "donut",
-    "waffle",
-    "radar",
+    "galaxy",
     "gauge",
-    "accelerometer",
-    "quadrant",
+    "graph",
+    "heatmap",
     "line",
-    "table",
+    "molecule",
+    "mood radar",
+    "quadrant",
+    "radar",
     "rating",
+    "relationship circle",
+    "rings",
+    "scatter",
     "screenshot",
-    "sparkline",
-    "sparkbar",
     "skeleton",
-    "scatter",
-    "heatmap",
-    "candlestick",
-    "age pyramid",
-    "dashboard",
-    "annotator",
     "smiley",
-    "relationship circle",
+    "sparkbar",
+    "sparkline",
+    "table",
     "thermometer",
-    "rings",
-    "wheel",
     "tiremarks",
-    "donut evolution",
-    "mood radar",
-    "3d bar",
-    "molecule",
-    "tree"
+    "tree",
+    "waffle",
+    "wheel"
   ],
   "author": "Alec Lloyd Probert",
   "repository": {

package.json

@@ -54,6 +54,7 @@ import { getVueDataUiConfig } from "vue-data-ui";
 import SparkGaugeTest from "./components/vue-ui-sparkgauge.vue";
 import VueDataUiTest from "./components/vue-data-ui.vue";
 import VueDataUi from "./components/vue-data-ui.vue";
+import GalaxyTest from "./components/vue-ui-galaxy.vue";
 
 const dataset = ref([
   {
@@ -2797,6 +2798,58 @@ function testEmit2(data) {
   console.log({data})
 }
 
+const galaxyDataset = ref([
+{
+    name: "serie 1",
+    color: "",
+    values: [255],
+    shape: "star"
+  },
+  {
+    name: "serie 2",
+    color: "",
+    values: [129],
+    shape: "diamond"
+  },
+  {
+    name: "serie 3",
+    color: "",
+    values: [21],
+    shape: "triangle"
+  },
+  {
+    name: "serie 4",
+    color: "",
+    values: [19],
+    shape: "hexagon"
+  },
+]);
+
+const galaxyConfig = ref({
+  style: {
+    chart: {
+      layout: {
+        arcs: {
+          strokeWidth: 6,
+          borderWidth: 2
+        }
+      },
+      title: {
+        text: "Title",
+        subtitle: {
+          text: "Subtitle"
+        }
+      },
+      tooltip: {
+        customFormat: ({ datapoint, series, config, seriesIndex }) => {
+          console.log({ datapoint, series})
+          return datapoint.name
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -2822,6 +2875,7 @@ function testEmit2(data) {
       <template #misc>
         <div style="display: flex; flex-wrap: wrap; gap: 12px; width: 100%">        
           <BaseIcon name="pdf" />
+          <BaseIcon name="csv"/>
           <BaseIcon name="image" />
           <BaseIcon name="excel" />
           <BaseIcon name="tableOpen" />
@@ -2895,11 +2949,29 @@ function testEmit2(data) {
           <BaseIcon name="chartNestedDonuts" stroke="#42d392" />
           <BaseIcon name="chartSparkbar" stroke="#42d392" />
           <BaseIcon name="chartSparkline" stroke="#42d392" />
-
+          <BaseIcon name="legend" stroke="#42d392" />
         </div>
       </template>
       </Box>
 
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_galaxy)">
+        <template #title>
+          <BaseIcon name="chartGalaxy"/>
+          VueUiGalaxy
+        </template>
+        <template #info>
+        </template>
+        <template #dev>
+          <GalaxyTest :dataset="galaxyDataset" :config="galaxyConfig" />
+        </template>
+        <template #prod>
+          <VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig" />
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_galaxy }}
+        </template>
+      </Box>
+
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
         <template #title>
           <BaseIcon name="chartGauge"/>

src/App.vue

@@ -45,8 +45,8 @@ const icons = computed(() => {
         chartSparkHistogram: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 11C14 12 15 12 15 12L17 12C18 12 18 11 18 11L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9" />`,
         chartSparkStackbar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 18 10" style="opacity:0.3" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 14 10" style="opacity:0.5" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 8 10" />`,
         chartTable: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 6 10 18M2 10 18 10M6 2M14 2M2 6 18 6M2 14 18 14M6 8 8 8M6 12 8 12M6 16 8 16M14 8 16 8M14 12 16 12M14 16 16 16" />`,
-        chartThermometer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M13 4A1 1 0 007 4L7 16A1 1 0 0013 16L13 4M7 15 8 15M7 12 8 12M7 9 8 9M7 6 8 6M10 18 10 9M12 15 13 15M12 12 13 12M12 9 13 9M12 6 13 6" />`,
-        chartTiremarks: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12M15 8 15 12M17 8 17 12M19 8 19 12" />`,
+        chartThermometer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 13 4 A 1 1 0 0 0 7 4 L 7 16 A 1 1 0 0 0 13 16 L 13 4 M 7 15 L 8 15 M 7 12 L 8 12 M 7 9 L 8 9 M 7 6 L 8 6 M 12 15 L 13 15 M 12 12 L 13 12 M 12 9 L 13 9 M 12 6 L 13 6 " /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="0.6" d="M 10 17 L 10 12 " /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="M 10 17 L 10 9" d="0.6" /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="0.3" d="M 10 17 L 10 6" /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="0.1" d="M 10 17 L 10 3" />`,
+        chartTiremarks: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12M15 8 15 12M17 8 17 12M19 8 19 12" style="opacity:0.4" />`,
         chartVerticalBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 3 1 5C1 6 1 6 2 6L9 6C10 6 10 6 10 5L10 3C10 2 10 2 9 2L2 2C1 2 1 2 1 3M1 9 1 11C1 12 1 12 2 12L13 12C14 12 14 12 14 11L14 9C14 8 14 8 13 8L2 8C1 8 1 8 1 9M1 15 1 17C1 18 1 18 2 18L17 18C18 18 18 18 18 17L18 15C18 14 18 14 17 14L2 14C1 14 1 14 1 15" />`,
         chartWaffle: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 2 1 4C1 5 1 5 2 5L4 5C5 5 5 5 5 4L5 2C5 1 5 1 4 1L2 1C1 1 1 1 1 2M18 1 16 1C15 1 15 1 15 2L15 4C15 5 15 5 16 5L18 5C19 5 19 5 19 4L19 2C19 1 19 1 18 1M8 2 8 4C8 5 8 5 9 5L11 5C12 5 12 5 12 4L12 2C12 1 12 1 11 1L9 1C8 1 8 1 8 2M2 19 4 19C5 19 5 19 5 18L5 16C5 15 5 15 4 15L2 15C1 15 1 15 1 16L1 18C1 19 1 19 2 19M1 9 1 11C1 12 1 12 2 12L4 12C5 12 5 12 5 11L5 9C5 8 5 8 4 8L2 8C1 8 1 8 1 9M15 16 15 18C15 19 15 19 16 19L18 19C19 19 19 19 19 18L19 16C19 15 19 15 18 15L16 15C15 15 15 15 15 16M8 16 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 16C12 15 12 15 11 15L9 15C8 15 8 15 8 16M8 9 8 11C8 12 8 12 9 12L11 12C12 12 12 12 12 11L12 9C12 8 12 8 11 8L9 8C8 8 8 8 8 9M15 9 15 11C15 12 15 12 16 12L18 12C19 12 19 12 19 11L19 9C19 8 19 8 18 8L16 8C15 8 15 8 15 9" />`,
         chartWheel: `<circle cx="10" cy="10" r="7" fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-dasharray="16" stroke-linecap="round"/><circle cx="10" cy="10" r="9" fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-dasharray="2" stroke-linecap="round" style="opacity:0.7"/><circle cx="10" cy="10" r="1" fill="${props.stroke}" />`,
@@ -72,6 +72,7 @@ const icons = computed(() => {
         moodNeutral: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 12C9 12 11 12 15 12M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
         moodSad: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 14C6 9 14 9 15 14L5 14M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
         pdf: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM4 16 4 9 5 9Q7 9 7 11 7 13 5 13L4 13M9 16 9 9 9 9Q12 9 12 12L12 13Q12 16 9 16L9 16M14 16 14 9 16 9M14 12 16 12"/>`,
+        csv: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 4 1 C 2 1 1 2 1 4 L 1 16 C 1 18 2 19 4 19 L 16 19 C 18 19 19 18 19 16 L 19 6 C 15 6 14 5 14 1 Z M 7 11 C 7 10 7 9 6 9 L 5 9 C 4 9 4 10 4 11 L 4 14 C 4 15 4 16 5 16 L 6 16 C 7 16 7 15 7 14 M 12 11 C 12 10 12 9 11 9 L 10 9 C 9 9 9 10 9 11 C 9 13 12 12 12 14 C 12 15 12 16 11 16 L 10 16 C 9 16 9 15 9 14 M 14 9 L 15 16 L 16 9" />`,
         screenshot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 4 1 3C1 2 2 1 3 1L4 1M16 1 17 1C18 1 19 2 19 3L19 4M1 16 1 17C1 18 2 19 3 19L4 19M16 19 17 19C18 19 19 18 19 17L19 16M8 10A1 1 0 0012 10 1 1 0 008 10M5 13 5 8C5 7 5 7 6 7L14 7C15 7 15 7 15 8L15 13C15 14 15 14 14 14L6 14C5 14 5 14 5 13M7 6 13 6" />`,
         skeleton: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 14A1 1 0 003 18L7 18A1 1 0 007 14L3 14M3 8A1 1 0 003 12L7 12A1 1 0 007 8L3 8M3 2A1 1 0 003 6L4 6A1 1 0 004 2L3 2M12 10 12 16C12 17 13 18 14 18L17 18C18 18 19 17 19 16L19 10C19 9 18 8 17 8L14 8C13 8 12 9 12 10" stroke-dasharray="2" />`,
         smiley: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 12C8 14 12 14 15 12M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
@@ -98,7 +99,9 @@ const icons = computed(() => {
         circleQuestion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 10 5 C 14 5 14 10 10 10 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13 M 7 7 C 7 6 8 5 10 5" />`,
         refresh: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 A 1 1 0 0 0 17 10 C 17 5 12 2 7 4 L 10 1 M 7 4 L 10 7" />`,
         chartSparkbar: `<path fill="none"  stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 18 5 M 2 10 L 18 10 M 2 15 L 18 15" style="opacity:0.3" /><path fill="none"  stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 15 5 M 2 10 L 11 10 M 2 15 L 7 15" />`,
-        chartSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 1 10 C 1 8 2 8 2 8 C 4 8 4 12 6 13 C 8 12 6 7 8 6 C 10 6 10 11 11 11 C 13 12 12 6 14 4" />`
+        chartSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 1 10 C 1 8 2 8 2 8 C 4 8 4 12 6 13 C 8 12 6 7 8 6 C 10 6 10 11 11 11 C 13 12 12 6 14 4" />`,
+        legend: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 3 2 L 5 2 C 5 2 6 2 6 3 L 6 5 C 6 6 5 6 5 6 L 3 6 C 3 6 2 6 2 5 L 2 3 C 2 2 3 2 3 2 M 8 4 C 8 3 9 3 9 3 L 17 3 C 17 3 18 3 18 4 C 18 5 17 5 17 5 L 9 5 C 9 5 8 5 8 4 M 3 8 L 5 8 C 5 8 6 8 6 9 L 6 11 C 6 12 5 12 5 12 L 3 12 C 3 12 2 12 2 11 L 2 9 C 2 8 3 8 3 8 M 8 10 C 8 9 9 9 9 9 L 17 9 C 17 9 18 9 18 10 C 18 11 17 11 17 11 L 9 11 C 9 11 8 11 8 10 M 3 14 L 5 14 C 5 14 6 14 6 15 L 6 17 C 6 18 5 18 5 18 L 3 18 C 3 18 2 18 2 17 L 2 15 C 2 14 3 14 3 14 M 8 16 C 8 15 9 15 9 15 L 17 15 C 17 15 18 15 18 16 C 18 17 17 17 17 17 L 9 17 C 9 17 8 17 8 16" />`,
+        chartGalaxy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11" />`
     }
 })