From d23746f748e9a7d41b95fa3836960556f00b33b6 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 17 Aug 2020 13:59:09 +0100
Subject: [PATCH] Functional Linechart

---
 .../userInterface/temporaryPanelStructure.js  | 971 ++----------------
 packages/standard-components/components.json  |   3 +-
 .../standard-components/src/Chart/Bar.svelte  |  12 -
 .../standard-components/src/Chart/Line.svelte | 243 +++--
 .../src/Chart/tests/line.html                 | 151 ++-
 5 files changed, 332 insertions(+), 1048 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 17a2b48bb8..b8b1b95a13 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -470,11 +470,8 @@ export default {
               name: "Donut",
               _component: "@budibase/standard-components/donut",
               description: "Donut chart",
-              icon: "ri-donut-chart-line",
+              icon: "ri-pie-chart-fill",
               properties: {
-                design: {
-                  ...all,
-                },
                 settings: [
                   {
                     label: "Table",
@@ -561,495 +558,11 @@ export default {
                 ],
               },
             },
-            {
-              name: "Heatmap",
-              _component: "@budibase/standard-components/heatmap",
-              description: "Heatmap chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    day: 0,
-                    hour: 0,
-                    value: 7,
-                  },
-                  {
-                    day: 0,
-                    hour: 1,
-                    value: 10,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Boxsize",
-                    key: "boxSize",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Scatterplot",
-              _component: "@budibase/standard-components/scatterplot",
-              description: "Scatterplot chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    name: "topic",
-                    x: 123,
-                    y: 24,
-                  },
-                  {
-                    name: "topic1",
-                    x: 53,
-                    y: 31,
-                  },
-                  {
-                    name: "topic2",
-                    x: 631,
-                    y: 321,
-                  },
-                  {
-                    name: "topic1",
-                    x: 231,
-                    y: 111,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Circle Opacity",
-                    key: "circleOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Has Crosshairs",
-                    key: "hasCrossHairs",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Max Circle Area",
-                    key: "maxCircleArea",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Format",
-                    key: "yAxisFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "StackedArea",
-              _component: "@budibase/standard-components/stackedarea",
-              description: "StackedArea chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    date: "2011-01-05T00:00:00Z",
-                    name: "Direct",
-                    value: 0,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Curve",
-                    key: "areaCurve",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Opacity",
-                    key: "areaOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Opacity",
-                    key: "areaOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "dateLabel",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    key: "isAnimated",
-                    label: "Is Animated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Key Label",
-                    key: "keyLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Use Legend",
-                    key: "useLegend",
-                    keyValue: "checked",
-                    control: Checkbox,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Step",
-              _component: "@budibase/standard-components/step",
-              description: "Step chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    key: "glittering",
-                  },
-                  {
-                    value: 2,
-                    key: "luminous",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Sparkline",
-              _component: "@budibase/standard-components/sparkline",
-              description: "Sparkline chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    date: "2011-01-06T00:00:00Z",
-                  },
-                  {
-                    value: 2,
-                    date: "2011-01-07T00:00:00Z",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Line Gradient",
-                    key: "lineGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Area Gradient",
-                    key: "areaGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    key: "height",
-                    label: "Height",
-                    control: Input,
-                  },
-                  {
-                    key: "width",
-                    label: "Width",
-                    control: Input,
-                  },
-                  {
-                    key: "dateLabel",
-                    label: "Date Label",
-                    control: Input,
-                  },
-                  {
-                    key: "isAnimated",
-                    label: "Is Animated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    key: "titleText",
-                    label: "Title Text",
-                    control: Input,
-                  },
-                  {
-                    key: "valueLabel",
-                    label: "Value Label",
-                    control: Input,
-                  },
-                ],
-              },
-            },
             {
               name: "Bar",
               _component: "@budibase/standard-components/bar",
               description: "Bar chart",
               icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    name: "glittering",
-                  },
-                  {
-                    value: 1,
-                    name: "luminous",
-                  },
-                ],
-              },
               properties: {
                 settings: [
                   {
@@ -1162,123 +675,11 @@ export default {
                 ],
               },
             },
-            {
-              name: "Brush",
-              _component: "@budibase/standard-components/brush",
-              description: "Brush chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    date: "2011-01-06T00:00:00Z",
-                  },
-                  {
-                    value: 2,
-                    date: "2011-01-07T00:00:00Z",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Gradient",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Range",
-                    key: "dateRange",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Time Interval",
-                    key: "roundingTimeInterval",
-                    control: OptionSelect,
-                    options: [
-                      "timeDay",
-                      "timeMillisecond",
-                      "utcMillisecond",
-                      "timeSecond",
-                      "utcSecond",
-                      "timeMinute",
-                      "utcMinute",
-                      "timeHour",
-                      "utcHour",
-                      "utcDay",
-                      "timeWeek",
-                      "utcWeek",
-                      "timeSunday",
-                      "utcSunday",
-                      "timeMonday",
-                      "utcMonday",
-                      "timeTuesday",
-                      "utcTuesday",
-                      "timeWednesday",
-                      "utcWednesday",
-                      "timeThursday",
-                      "utcThursday",
-                      "timeFriday",
-                      "utcFriday",
-                      "timeSaturday",
-                      "utcSaturday",
-                      "timeMonth",
-                      "utcMonth",
-                      "timeYear",
-                      "utcYear",
-                    ],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
             {
               name: "Groupedbar",
               _component: "@budibase/standard-components/groupedbar",
               description: "Groupedbar chart",
-              icon: "ri-bar-chart-fill",
+              icon: "ri-bar-chart-grouped-fill",
               properties: {
                 settings: [
                   {
@@ -1364,263 +765,11 @@ export default {
                 ],
               },
             },
-            {
-              name: "Bullet",
-              _component: "@budibase/standard-components/bullet",
-              description: "Bullet chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: {
-                  ranges: [130, 160, 250],
-                  measures: [150, 180],
-                  markers: [175],
-                },
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Title",
-                    key: "title",
-                    control: Input,
-                  },
-                  {
-                    label: "Subtitle",
-                    key: "subtitle",
-                    control: Input,
-                  },
-                  {
-                    label: "Axis Padding",
-                    key: "paddingBetweenAxisAndChart",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Stacked Bar",
-              _component: "@budibase/standard-components/stackedbar",
-              description: "Stacked Bar Chart",
-              icon: "ri-file-list-fill",
-              presetProps: {
-                data: [
-                  {
-                    name: "2011-01",
-                    stack: "Direct",
-                    value: 0,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Between Bars Padding",
-                    key: "betweenBarsPadding",
-                    control: Input,
-                  },
-                  {
-                    label: "Max Ratio Percentage",
-                    key: "percentageToMaxRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Stack Label",
-                    key: "stackLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Has Reversed Stacks",
-                    key: "hasReversedStacks",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Has Percentage",
-                    key: "hasPercentage",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yTicksLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                ],
-              },
-            },
             {
               name: "Line",
               _component: "@budibase/standard-components/line",
               description: "Line chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: {
-                  data: [
-                    {
-                      topicName: "San Francisco",
-                      name: 1,
-                      date: "2020-01-16",
-                      value: 1,
-                    },
-                    {
-                      topicName: "San Fran",
-                      name: 2,
-                      date: "2020-01-17",
-                      value: 2,
-                    },
-                    {
-                      topicName: "LA",
-                      name: 3,
-                      date: "2020-01-18",
-                      value: 3,
-                    },
-                    {
-                      topicName: "Toronto",
-                      name: 4,
-                      date: "2020-01-19",
-                      value: 7,
-                    },
-                    {
-                      topicName: "Van",
-                      name: 4,
-                      date: "2020-01-20",
-                      value: 12,
-                    },
-                    {
-                      topicName: "Dundee",
-                      name: 4,
-                      date: "2020-01-21",
-                      value: 16,
-                    },
-                    {
-                      topicName: "Dublin",
-                      name: 4,
-                      date: "2020-01-22",
-                      value: 31,
-                    },
-                  ],
-                },
-                aspectRatio: 0.5,
-                grid: "horizontal",
-                dateLabel: "fullDate",
-                shouldShowAllDataPoints: true,
-              },
+              icon: "ri-line-chart-fill",
               properties: {
                 settings: [
                   {
@@ -1628,16 +777,6 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -1656,42 +795,15 @@ export default {
                     ],
                   },
                   {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
+                    label: "Gradients",
+                    key: "lineGradient",
                     control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
                   },
                   {
                     label: "Line Curve",
@@ -1711,8 +823,20 @@ export default {
                     ],
                   },
                   {
-                    label: "Locale",
-                    key: "locale",
+                    label: "X Axis Value Type",
+                    key: "xAxisValueType",
+                    control: OptionSelect,
+                    options: ["date", "number"],
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
                     control: Input,
                   },
                   {
@@ -1730,17 +854,44 @@ export default {
                     key: "xAxisLabel",
                     control: Input,
                   },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Show All Datapoints",
+                    key: "shouldShowAllDataPoints",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: OptionSelect,
+                    options: ["en-GB", "en-US"],
+                  },
                   {
                     label: "X Axis Value Type",
                     key: "xAxisValueType",
                     control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "X Axis Scale",
-                    key: "xAxisScale",
-                    control: OptionSelect,
-                    options: ["linear", "logarithmic"],
+                    options: ["date", "numeric"],
                   },
                   {
                     label: "X Axis Format",
@@ -1760,8 +911,8 @@ export default {
                     control: Input,
                   },
                   {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
+                    label: "Tooltip Title",
+                    key: "tooltipTitle",
                     control: Input,
                   },
                 ],
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index c8553503d2..06ed5a9135 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -468,7 +468,8 @@
 			"xAxisScale": "string",
 			"xAxisFormat": "string",
 			"xAxisCustomFormat": "string",
-			"xAxisLabel": "string"
+			"xAxisLabel": "string",
+			"tooltipTitle": "string"
 		}
 	},
 	"brush":{
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index 2a4018e33a..a7d7bcf98f 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -199,19 +199,7 @@
   $: chartGradient = getChartGradient(gradient)
 </script>
 
-<!-- SVG Test 
-  <svg viewBox="6 -8 200 22">
-    <text x="5" y="10" class="text-svg">Hello World</text>
-  </svg>-->
-
 <div bind:this={chartElement} class={chartClass} />
 {#if useLegend}
   <div class={legendClass} />
 {/if}
-
-<style>
-  .text-svg {
-    font: italic 15px serif;
-    fill: red;
-  }
-</style>
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
index ac67b83368..3c94721cfe 100644
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@@ -1,11 +1,13 @@
 <script>
   import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import sort from "fast-sort"
   import Tooltip from "./Tooltip.svelte"
   import britecharts from "britecharts"
   import { onMount } from "svelte"
 
   import { select } from "d3-selection"
   import shortid from "shortid"
+  import { log } from "console"
 
   const _id = shortid.generate()
 
@@ -18,52 +20,22 @@
   const chartClass = `line-container-${_id}`
   const legendClass = `legend-container-${_id}`
 
-  const testData = {
-    data: [
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-16T16:00:00-08:00",
-        value: 3,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-17T16:00:00-08:00",
-        value: 7,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-18T16:00:00-08:00",
-        value: 5,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-19T16:00:00-08:00",
-        value: 6,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-20T16:00:00-08:00",
-        value: 1,
-      },
-    ],
-  }
-
-  let data = testData
+  let data = { data: [] }
 
   let chartElement
   let chartContainer
   let tooltip
   let tooltipContainer
 
-  export let customMouseOver = null //() => tooltip.show()
-  export let customMouseMove = null //(dataPoint, topicColorMap, dataPointXPosition) =>
-  //tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
-  export let customMouseOut = null //() => tooltip.hide()
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    topicColorMap,
+    dataPointXPosition
+  ) => {
+    tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
+  }
+  export let customMouseOut = () => tooltip.hide()
 
   export let customDataEntryClick = null
   export let customTouchMove = null
@@ -72,7 +44,6 @@
   export let axisTimeCombinations = ""
   export let grid = "horizontal"
   export let aspectRatio = 0.5
-  export let dateLabel = "date"
   export let width = null
   export let height = null
   export let isAnimated = true
@@ -82,6 +53,7 @@
   export let numberFormat = ""
   export let shouldShowAllDataPoints = true
   export let topicLabel = null
+  export let dateLabel = "date"
   export let valueLabel = null
   export let xAxisLabel = ""
   export let xAxisValueType = "date"
@@ -92,12 +64,13 @@
   export let yAxisLabelPadding = null
   export let lines = null //not handled by setting prop
   export let tooltipThreshold = null
+  export let tooltipTitle = ""
 
   let chartDrawn = false
 
   onMount(async () => {
     if (chart) {
-      // data = await getAndPrepareData()
+      data = await getAndPrepareData()
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
@@ -121,94 +94,114 @@
   }
 
   async function getAndPrepareData() {
-    let data = []
+    let dataByTopic = []
+    let _data = []
+
+    if (!topicLabel) {
+      topicLabel = "topic"
+    }
+
+    if (!valueLabel) {
+      valueLabel = "value"
+    }
+
+    if (!dateLabel) {
+      dateLabel = "date"
+    }
+
     if (model) {
       await fetchData()
-      data = $store[model]
+      _data = $store[model]
     }
-    return { data }
+
+    _data.forEach((data, idx, arr) => {
+      let topicName = data[topicLabel]
+      if (!dataByTopic.some(dt => dt.topicName === topicName)) {
+        let d = {
+          topicName,
+          topic: dataByTopic.length + 1,
+          dates: arr
+            .filter(d => d[topicLabel] === topicName)
+            .map(d => ({ date: new Date(d[dateLabel]), value: d[valueLabel] })),
+        }
+        d.dates = d.dates.sort((a, b) => a.date - b.date)
+        dataByTopic.push(d)
+      }
+    })
+
+    return { dataByTopic }
   }
 
-  $: console.log("DATA", data)
+  $: console.table("DATA", data)
 
   function bindChartUIProps() {
     chart.grid("horizontal")
-    chart.dateLabel("date")
-    chart.aspectRatio(0.5)
     chart.isAnimated(true)
+    // chart.tooltipThreshold(800)
 
-    // if (notNull(color)) {
-    //   //chart.colorSchema(colorSchema)
-    // }
-    // if (notNull(lineGradient)) {
-    //   chart.lineGradient(chartGradient)
-    // }
-    // if (notNull(axisTimeCombinations)) {
-    //   chart.axisTimeCombinations(axisTimeCombinations)
-    // }
-    // if (notNull(grid)) {
-    //   chart.grid(grid)
-    // }
-    // if (notNull(aspectRatio)) {
-    //   chart.aspectRatio(aspectRatio)
-    // }
-    // if (notNull(dateLabel)) {
-    //   chart.dateLabel(dateLabel)
-    // }
-    // if (notNull(width)) {
-    //   chart.width(width)
-    // }
-    // if (notNull(height)) {
-    //   chart.height(height)
-    // }
-    // if (notNull(isAnimated)) {
-    //   chart.isAnimated(isAnimated)
-    // }
-    // if (notNull(lineCurve)) {
-    //   chart.lineCurve(lineCurve)
-    // }
-    // if (notNull(locale)) {
-    //   chart.locale(locale)
-    // }
-    // if (notNull(numberFormat)) {
-    //   chart.numberFormat(numberFormat)
-    // }
-    // if (notNull(shouldShowAllDataPoints)) {
-    //   chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
-    // }
-    // if (notNull(topicLabel)) {
-    //   chart.topicLabel(topicLabel)
-    // }
-    // if (notNull(valueLabel)) {
-    //   chart.valueLabel(valueLabel)
-    // }
-    // if (notNull(xAxisLabel)) {
-    //   chart.xAxisLabel(xAxisLabel)
-    // }
-    // if (notNull(xAxisValueType)) {
-    //   chart.xAxisValueType(xAxisValueType)
-    // }
-    // if (notNull(xAxisScale)) {
-    //   chart.xAxisScale(xAxisScale)
-    // }
-    // if (notNull(xAxisFormat)) {
-    //   chart.xAxisFormat(xAxisFormat)
-    // }
-    // if (notNull(xAxisCustomFormat)) {
-    //   chart.xAxisCustomFormat(xAxisCustomFormat)
-    // }
-    // if (notNull(yAxisLabel)) {
-    //   chart.yAxisLabel(yAxisLabel)
-    // }
-    // if (notNull(yAxisLabelPadding)) {
-    //   chart.yAxisLabelPadding(yAxisLabelPadding)
-    // }
-    // if (notNull(tooltipThreshold)) {
-    //   chart.tooltipThreshold(tooltipThreshold)
-    // }
-    // if (notNull(lines)) {
-    //   chart.lines(lines)
-    // }
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(lineGradient)) {
+      chart.lineGradient(chartGradient)
+    }
+    if (notNull(axisTimeCombinations)) {
+      chart.axisTimeCombinations(axisTimeCombinations)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(lineCurve)) {
+      chart.lineCurve(lineCurve)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(numberFormat)) {
+      chart.numberFormat(numberFormat)
+    }
+    if (notNull(shouldShowAllDataPoints)) {
+      chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisValueType)) {
+      chart.xAxisValueType(xAxisValueType)
+    }
+    if (notNull(xAxisScale)) {
+      chart.xAxisScale(xAxisScale)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisCustomFormat)) {
+      chart.xAxisCustomFormat(xAxisCustomFormat)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelPadding)) {
+      chart.yAxisLabelPadding(yAxisLabelPadding)
+    }
+    if (notNull(tooltipThreshold)) {
+      chart.tooltipThreshold(tooltipThreshold)
+    }
+    if (notNull(lines)) {
+      chart.lines(lines)
+    }
   }
 
   function bindChartEvents() {
@@ -234,6 +227,10 @@
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
-<!-- {#if chartDrawn}
-  <Tooltip bind:tooltip {valueLabel} {chartClass} />
-{/if} -->
+{#if chartDrawn}
+  <Tooltip
+    bind:tooltip
+    title={tooltipTitle || 'Line Tooltip'}
+    topicLabel="topics"
+    {chartClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/tests/line.html b/packages/standard-components/src/Chart/tests/line.html
index 433c798c87..6bfd3c2ea6 100644
--- a/packages/standard-components/src/Chart/tests/line.html
+++ b/packages/standard-components/src/Chart/tests/line.html
@@ -22,6 +22,153 @@
     
     <script>
 
+const testData = {
+  data: [
+  {
+amount: 8,
+audited: new Date("2020-01-01T16:00:00-08:00"),
+city: "Belfast",
+name: 1,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "ceb87054790f480e80512368545755bb",
+_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
+},
+{
+amount: 12,
+audited: new Date("2020-01-03T16:00:00-08:00"),
+city: "Belfast",
+name: 1,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "0a36103b55124f348a23d10b2f3ed0e3",
+_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
+},
+{
+amount: 6,
+audited: new Date("2020-01-04T16:00:00-08:00"),
+city: "Belfast",
+name: 1,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "68ade2bb94754caa8fc62c7084e3cef7",
+_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
+},
+{
+amount: 2,
+audited: new Date("2020-01-01T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "2ab6dabf833f4d99b3438fa4353ba429",
+_rev: "2-45b190489e76842981902cc9f04369ec",
+},
+{
+amount: 16,
+audited: new Date("2020-01-02T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "1b2ca36db1724427a98ba95547f946e0",
+_rev: "2-c43def17ada959948b9af5484ad5b6b7",
+},
+{
+amount: 7,
+audited: new Date("2020-01-03T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "d9235d884a224ca68ac30cefdbb8ae53",
+_rev: "2-695e426a261a25474cbf6b1f069dccb4",
+},
+{
+amount: 3,
+audited: new Date("2020-01-04T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "9f8bc39a9cfb4f779da8c998d7622927",
+_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
+},
+{
+amount: 4,
+audited: new Date("2020-01-02T16:00:00-08:00"),
+city: "London",
+name: 3,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "75274e906073493bbf75cda8656e8db0",
+_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
+},
+{
+amount: 22,
+audited: new Date("2020-01-06T16:00:00-08:00"),
+city: "London",
+name: 3,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "da3d4b151bc641f4ace487a2314d2550",
+_rev: "2-ac18490eaa016be0e71bd4c4ea332981",
+}
+  ]
+}
+
+const topicLabel = "city"
+const valueLabel = "amount"
+const dateLabel = "audited"
+
+function prepareData() {
+  let dataByTopic = []
+  testData.data.forEach((data, idx, arr) => {
+    let topicName = data[topicLabel]
+    if(!dataByTopic.some(dt => dt.topicName === topicName)) {
+      let d = {topicName, topic: dataByTopic.length + 1, dates: arr.filter(d => d[topicLabel] === topicName).map(d => ({date: d[dateLabel], value: d[valueLabel]}))}
+      dataByTopic.push(d)
+    }
+  })
+  return {dataByTopic}
+}
+
+const newData = prepareData()
+debugger
+
+const dataByTopic = {
+  dataByTopic: [
+    {
+      topicName: 'San Francisco',
+      topic: 123,
+      dates: [
+          {
+              date: '2017-01-16T16:00:00-08:00',
+              value: 1
+          },
+          {
+              date: '2017-01-16T17:00:00-08:00',
+              value: 2
+          }
+      ]
+  },
+  {
+      topicName: 'Belfast',
+      topic: 456,
+      dates: [
+          {
+              date: '2017-01-16T16:00:00-08:00',
+              value: 5
+          },
+          {
+              date: '2017-01-16T17:00:00-08:00',
+              value: 8
+          }
+      ]
+  }
+ ]
+}
+
 const data = {
     data: [
       {
@@ -61,9 +208,9 @@ const data = {
 
     const lineChart = britecharts.line()
 
-    lineChart.grid("horizontal").dateLabel("date").aspectRatio(0.5).isAnimated(true)
+    lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true)
 
-    lineContainer.datum(data).call(lineChart);
+    lineContainer.datum(newData).call(lineChart);
     
     </script>