Add bar chart with initial apex charts config
This commit is contained in:
Andrew Kingston
parent
6d2a2b3af9
commit
fee942f4ec
|
|
@ -422,100 +422,100 @@ export default {
|
|||
icon: "ri-bar-chart-2-line",
|
||||
isCategory: true,
|
||||
children: [
|
||||
{
|
||||
name: "Donut",
|
||||
_component: "@budibase/standard-components/donut",
|
||||
description: "Donut chart",
|
||||
icon: "ri-pie-chart-fill",
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Data",
|
||||
key: "datasource",
|
||||
control: TableViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Name Field",
|
||||
key: "nameKey",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Value Field",
|
||||
key: "valueKey",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Animate Chart",
|
||||
key: "isAnimated",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Hover Highlight",
|
||||
key: "hasHoverAnimation",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Keep Last Hover",
|
||||
key: "hasLastHoverSliceHighlighted",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Colors",
|
||||
key: "color",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"britecharts",
|
||||
"blueGreen",
|
||||
"green",
|
||||
"grey",
|
||||
"orange",
|
||||
"pink",
|
||||
"purple",
|
||||
"red",
|
||||
"teal",
|
||||
"yellow",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "External Radius",
|
||||
key: "externalRadius",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Internal Radius",
|
||||
key: "internalRadius",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Radius Offset",
|
||||
key: "radiusHoverOffset ",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Show Legend",
|
||||
key: "useLegend ",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Horizontal Legend",
|
||||
key: "horizontalLegend",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Legend Width",
|
||||
key: "legendWidth",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: "Donut",
|
||||
// _component: "@budibase/standard-components/donut",
|
||||
// description: "Donut chart",
|
||||
// icon: "ri-pie-chart-fill",
|
||||
// properties: {
|
||||
// settings: [
|
||||
// {
|
||||
// label: "Data",
|
||||
// key: "datasource",
|
||||
// control: TableViewSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Name Field",
|
||||
// key: "nameKey",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Value Field",
|
||||
// key: "valueKey",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Animate Chart",
|
||||
// key: "isAnimated",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Hover Highlight",
|
||||
// key: "hasHoverAnimation",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Keep Last Hover",
|
||||
// key: "hasLastHoverSliceHighlighted",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Colors",
|
||||
// key: "color",
|
||||
// control: OptionSelect,
|
||||
// options: [
|
||||
// "britecharts",
|
||||
// "blueGreen",
|
||||
// "green",
|
||||
// "grey",
|
||||
// "orange",
|
||||
// "pink",
|
||||
// "purple",
|
||||
// "red",
|
||||
// "teal",
|
||||
// "yellow",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "External Radius",
|
||||
// key: "externalRadius",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Internal Radius",
|
||||
// key: "internalRadius",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Radius Offset",
|
||||
// key: "radiusHoverOffset ",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Show Legend",
|
||||
// key: "useLegend ",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Horizontal Legend",
|
||||
// key: "horizontalLegend",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Legend Width",
|
||||
// key: "legendWidth",
|
||||
// control: Input,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: "Bar",
|
||||
_component: "@budibase/standard-components/bar",
|
||||
|
|
@ -529,13 +529,13 @@ export default {
|
|||
control: TableViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Name Label",
|
||||
label: "Label Col.",
|
||||
key: "nameLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
label: "Value Col.",
|
||||
key: "valueLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
|
|
@ -550,291 +550,11 @@ export default {
|
|||
key: "xAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "X Axis Label Offset",
|
||||
key: "xAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label Offset",
|
||||
key: "yAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Enable Labels",
|
||||
key: "enableLabels",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
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: "Gradients",
|
||||
key: "gradient",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ value: "", label: "None" },
|
||||
{ value: "bluePurple", label: "Blue Purple" },
|
||||
{ value: "greenBlue", label: "Green Blue" },
|
||||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Highlight Single Bar",
|
||||
key: "hasSingleBarHighlight",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
key: "width",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Animate",
|
||||
key: "isAnimate",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Horizontal",
|
||||
key: "isHorizontal",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Label Number Format",
|
||||
key: "labelsNumberFormat",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Grouped Bar",
|
||||
_component: "@budibase/standard-components/groupedbar",
|
||||
description: "Groupedbar chart",
|
||||
icon: "ri-bar-chart-grouped-fill",
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Data",
|
||||
key: "datasource",
|
||||
control: TableViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Name Label",
|
||||
key: "nameLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Group Label",
|
||||
key: "groupLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
key: "valueLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
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: "Grid",
|
||||
key: "grid",
|
||||
control: OptionSelect,
|
||||
options: ["vertical", "horizontal", "full"],
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
key: "valueLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Ticks",
|
||||
key: "yTicks",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Tick Text Offset",
|
||||
key: "yTickTextOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Is Animated",
|
||||
key: "isAnimated",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Is Horizontal",
|
||||
key: "isHorizontal",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Tooltip Title",
|
||||
key: "tooltipTitle",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Line",
|
||||
_component: "@budibase/standard-components/line",
|
||||
description: "Line chart",
|
||||
icon: "ri-line-chart-line",
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Data",
|
||||
key: "datasource",
|
||||
control: TableViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
key: "valueLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Topic Label",
|
||||
key: "topicLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Date Label",
|
||||
key: "dateLabel",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Colors",
|
||||
key: "color",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"britecharts",
|
||||
"blueGreen",
|
||||
"green",
|
||||
"grey",
|
||||
"orange",
|
||||
"pink",
|
||||
"purple",
|
||||
"red",
|
||||
"teal",
|
||||
"yellow",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Gradients",
|
||||
key: "lineGradient",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ value: "", label: "None" },
|
||||
{ value: "bluePurple", label: "Blue Purple" },
|
||||
{ value: "greenBlue", label: "Green Blue" },
|
||||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Line Curve",
|
||||
key: "lineCurve",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"linear",
|
||||
"basis",
|
||||
"natural",
|
||||
"monotoneX",
|
||||
"monotoneY",
|
||||
"step",
|
||||
"stepAfter",
|
||||
"stepBefore",
|
||||
"cardinal",
|
||||
"catmullRom",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "X Axis Value Type",
|
||||
key: "xAxisValueType",
|
||||
control: OptionSelect,
|
||||
options: ["date", "number"],
|
||||
},
|
||||
{
|
||||
label: "Grid",
|
||||
key: "grid",
|
||||
control: OptionSelect,
|
||||
options: ["vertical", "horizontal", "full"],
|
||||
},
|
||||
{
|
||||
label: "X Axis Label",
|
||||
key: "xAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label",
|
||||
key: "yAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Show All Datapoints",
|
||||
key: "shouldShowAllDataPoints",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
control: Colorpicker,
|
||||
defaultValue: "#4285f4",
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
|
|
@ -845,60 +565,300 @@ export default {
|
|||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
defaultValue: "400",
|
||||
},
|
||||
{
|
||||
label: "Is Animated",
|
||||
key: "isAnimated",
|
||||
label: "Horizontal",
|
||||
key: "horizontal",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Locale",
|
||||
key: "locale",
|
||||
control: OptionSelect,
|
||||
options: ["en-GB", "en-US"],
|
||||
label: "Data Labels",
|
||||
key: "dataLabels",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
defaultValue: true,
|
||||
},
|
||||
{
|
||||
label: "X Axis Value Type",
|
||||
key: "xAxisValueType",
|
||||
control: OptionSelect,
|
||||
options: ["date", "numeric"],
|
||||
},
|
||||
{
|
||||
label: "X Axis Format",
|
||||
key: "xAxisFormat",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"day-month",
|
||||
"minute-hour",
|
||||
"hour-daymonth",
|
||||
"month-year",
|
||||
"custom",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "X Axis Custom Format",
|
||||
key: "xAxisCustomFormat",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Tooltip Title",
|
||||
key: "tooltipTitle",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "X Ticks",
|
||||
key: "xTicks",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Ticks",
|
||||
key: "yTicks",
|
||||
control: Input,
|
||||
label: "Animate",
|
||||
key: "animate",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
defaultValue: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: "Grouped Bar",
|
||||
// _component: "@budibase/standard-components/groupedbar",
|
||||
// description: "Groupedbar chart",
|
||||
// icon: "ri-bar-chart-grouped-fill",
|
||||
// properties: {
|
||||
// settings: [
|
||||
// {
|
||||
// label: "Data",
|
||||
// key: "datasource",
|
||||
// control: TableViewSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Name Label",
|
||||
// key: "nameLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Group Label",
|
||||
// key: "groupLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Value Label",
|
||||
// key: "valueLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// 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: "Grid",
|
||||
// key: "grid",
|
||||
// control: OptionSelect,
|
||||
// options: ["vertical", "horizontal", "full"],
|
||||
// },
|
||||
// {
|
||||
// label: "Value Label",
|
||||
// key: "valueLabel",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Y Ticks",
|
||||
// key: "yTicks",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Y Tick Text Offset",
|
||||
// key: "yTickTextOffset",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Is Animated",
|
||||
// key: "isAnimated",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Is Horizontal",
|
||||
// key: "isHorizontal",
|
||||
// valueKey: "checked",
|
||||
// control: Checkbox,
|
||||
// },
|
||||
// {
|
||||
// label: "Tooltip Title",
|
||||
// key: "tooltipTitle",
|
||||
// control: Input,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "Line",
|
||||
// _component: "@budibase/standard-components/line",
|
||||
// description: "Line chart",
|
||||
// icon: "ri-line-chart-line",
|
||||
// properties: {
|
||||
// settings: [
|
||||
// {
|
||||
// label: "Data",
|
||||
// key: "datasource",
|
||||
// control: TableViewSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Value Label",
|
||||
// key: "valueLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Topic Label",
|
||||
// key: "topicLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Date Label",
|
||||
// key: "dateLabel",
|
||||
// dependsOn: "datasource",
|
||||
// control: TableViewFieldSelect,
|
||||
// },
|
||||
// {
|
||||
// label: "Colors",
|
||||
// key: "color",
|
||||
// control: OptionSelect,
|
||||
// options: [
|
||||
// "britecharts",
|
||||
// "blueGreen",
|
||||
// "green",
|
||||
// "grey",
|
||||
// "orange",
|
||||
// "pink",
|
||||
// "purple",
|
||||
// "red",
|
||||
// "teal",
|
||||
// "yellow",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "Gradients",
|
||||
// key: "lineGradient",
|
||||
// control: OptionSelect,
|
||||
// options: [
|
||||
// { value: "", label: "None" },
|
||||
// { value: "bluePurple", label: "Blue Purple" },
|
||||
// { value: "greenBlue", label: "Green Blue" },
|
||||
// { value: "orangePink", label: "Orange Pink" },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "Line Curve",
|
||||
// key: "lineCurve",
|
||||
// control: OptionSelect,
|
||||
// options: [
|
||||
// "linear",
|
||||
// "basis",
|
||||
// "natural",
|
||||
// "monotoneX",
|
||||
// "monotoneY",
|
||||
// "step",
|
||||
// "stepAfter",
|
||||
// "stepBefore",
|
||||
// "cardinal",
|
||||
// "catmullRom",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "X Axis Value Type",
|
||||
// key: "xAxisValueType",
|
||||
// control: OptionSelect,
|
||||
// options: ["date", "number"],
|
||||
// },
|
||||
// {
|
||||
// label: "Grid",
|
||||
// key: "grid",
|
||||
// control: OptionSelect,
|
||||
// options: ["vertical", "horizontal", "full"],
|
||||
// },
|
||||
// {
|
||||
// label: "X Axis Label",
|
||||
// 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", "numeric"],
|
||||
// },
|
||||
// {
|
||||
// label: "X Axis Format",
|
||||
// key: "xAxisFormat",
|
||||
// control: OptionSelect,
|
||||
// options: [
|
||||
// "day-month",
|
||||
// "minute-hour",
|
||||
// "hour-daymonth",
|
||||
// "month-year",
|
||||
// "custom",
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "X Axis Custom Format",
|
||||
// key: "xAxisCustomFormat",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Tooltip Title",
|
||||
// key: "tooltipTitle",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "X Ticks",
|
||||
// key: "xTicks",
|
||||
// control: Input,
|
||||
// },
|
||||
// {
|
||||
// label: "Y Ticks",
|
||||
// key: "yTicks",
|
||||
// control: Input,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -552,21 +552,26 @@
|
|||
"datasource": "tables",
|
||||
"nameLabel": "string",
|
||||
"valueLabel": "string",
|
||||
"betweenBarsPadding": "number",
|
||||
"gradient": "string",
|
||||
"color": "string",
|
||||
"hasSingleBarHighlight": "bool",
|
||||
"height": "number",
|
||||
"color": {
|
||||
"type": "string",
|
||||
"default": "#4285f4"
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"default": "400"
|
||||
},
|
||||
"width": "number",
|
||||
"isAnimated": "bool",
|
||||
"isHorizontal": "bool",
|
||||
"labelNumberFormat": "number",
|
||||
"locale": "string",
|
||||
"horizontal": "bool",
|
||||
"dataLabels": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"xAxisLabel": "string",
|
||||
"yAxisLabel": "string",
|
||||
"useLegend": "bool",
|
||||
"xTicks": "number",
|
||||
"yTicks": "number"
|
||||
"yAxisLabel": "string"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
|
|
|
|||
|
|
@ -35,18 +35,15 @@
|
|||
"license": "MIT",
|
||||
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
|
||||
"dependencies": {
|
||||
"@beyonk/svelte-googlemaps": "^2.2.0",
|
||||
"@budibase/bbui": "^1.50.1",
|
||||
"@budibase/svelte-ag-grid": "^0.0.13",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"@svelteschool/svelte-forms": "^0.7.0",
|
||||
"britecharts": "^2.16.1",
|
||||
"d3-selection": "^1.4.2",
|
||||
"apexcharts": "^3.22.1",
|
||||
"fast-sort": "^2.2.0",
|
||||
"flatpickr": "^4.6.6",
|
||||
"fusioncharts": "^3.15.1-sr.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"svelte-flatpickr": "^3.1.0",
|
||||
"svelte-fusioncharts": "^1.0.0"
|
||||
"svelte-apexcharts": "^1.0.2",
|
||||
"svelte-flatpickr": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
69
packages/standard-components/src/Chart/ApexOptionsBuilder.js
Normal file
69
packages/standard-components/src/Chart/ApexOptionsBuilder.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
export class ApexOptionsBuilder {
|
||||
options = {
|
||||
series: [],
|
||||
}
|
||||
|
||||
setOption(path, value) {
|
||||
if (value == null || value === "") {
|
||||
return this
|
||||
}
|
||||
let tmp = this.options
|
||||
for (let i = 0; i < path.length - 1; i++) {
|
||||
const step = path[i]
|
||||
if (!tmp[step]) {
|
||||
tmp[step] = {}
|
||||
}
|
||||
tmp = tmp[step]
|
||||
}
|
||||
tmp[path[path.length - 1]] = value
|
||||
return this
|
||||
}
|
||||
|
||||
getOptions() {
|
||||
return this.options
|
||||
}
|
||||
|
||||
type(type) {
|
||||
return this.setOption(["chart", "type"], type)
|
||||
}
|
||||
|
||||
color(color) {
|
||||
return this.setOption(["colors"], color)
|
||||
}
|
||||
|
||||
width(width) {
|
||||
return this.setOption(["chart", "width"], width || undefined)
|
||||
}
|
||||
|
||||
height(height) {
|
||||
return this.setOption(["chart", "height"], height || undefined)
|
||||
}
|
||||
|
||||
xLabel(label) {
|
||||
return this.setOption(["xaxis", "title", "text"], label)
|
||||
}
|
||||
|
||||
yLabel(label) {
|
||||
return this.setOption(["yaxis", "title", "text"], label)
|
||||
}
|
||||
|
||||
categories(categories) {
|
||||
return this.setOption(["xaxis", "categories"], categories)
|
||||
}
|
||||
|
||||
series(series) {
|
||||
return this.setOption(["series"], series)
|
||||
}
|
||||
|
||||
horizontal(horizontal) {
|
||||
return this.setOption(["plotOptions", "bar", "horizontal"], horizontal)
|
||||
}
|
||||
|
||||
dataLabels(dataLabels) {
|
||||
return this.setOption(["dataLabels", "enabled"], dataLabels)
|
||||
}
|
||||
|
||||
animate(animate) {
|
||||
return this.setOption(["chart", "animations", "enabled"], animate)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,187 +1,64 @@
|
|||
<script>
|
||||
import {
|
||||
getColorSchema,
|
||||
getChartGradient,
|
||||
notNull,
|
||||
hasProp,
|
||||
} from "./utils.js"
|
||||
import britecharts from "britecharts"
|
||||
import fetchData from "../fetchData.js"
|
||||
import { onMount } from "svelte"
|
||||
import { chart } from "svelte-apexcharts"
|
||||
import fetchData from "../fetchData"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
export let datasource
|
||||
export let nameLabel
|
||||
export let valueLabel
|
||||
export let xAxisLabel
|
||||
export let yAxisLabel
|
||||
export let height
|
||||
export let width
|
||||
export let color
|
||||
export let horizontal
|
||||
export let dataLabels
|
||||
export let animate
|
||||
|
||||
let tooltip
|
||||
const _id = shortid.generate()
|
||||
const chart = britecharts.bar()
|
||||
const chartClass = `bar-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
let tooltipContainer = null
|
||||
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (datapoint, colorMapping, x, y) =>
|
||||
tooltip.update(datapoint, colorMapping, x, y)
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
export let customClick = null
|
||||
|
||||
let data = []
|
||||
export let datasource = null
|
||||
export let xAxisLabel = ""
|
||||
export let yAxisLabel = ""
|
||||
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
|
||||
export let gradient = null
|
||||
export let color = "britecharts"
|
||||
export let enableLabels = false
|
||||
export let hasPercentage = null
|
||||
export let hasSingleBarHighlight = true
|
||||
export let highlightBarFunction = null
|
||||
export let height = 200
|
||||
export let width = 300
|
||||
export let labelsMargin = null
|
||||
export let isAnimated = true
|
||||
export let isHorizontal = true
|
||||
export let xAxisLabelOffset = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let labelsNumberFormat = null
|
||||
export let locale = null
|
||||
export let valueLabel = null
|
||||
export let nameLabel = null
|
||||
export let numberFormat = null
|
||||
export let labelsSize = null
|
||||
export let xTicks = null
|
||||
export let yTicks = null
|
||||
export let percentageAxisToMaxRatio = null
|
||||
let data
|
||||
$: options = getChartOptions(data)
|
||||
|
||||
// Fetch data on mount
|
||||
onMount(async () => {
|
||||
if (!isEmpty(datasource)) {
|
||||
data = await fetchData(datasource)
|
||||
|
||||
if (schemaIsValid()) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
} else {
|
||||
console.error("Bar Chart - Please provide a valid name and value label")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const schemaIsValid = () =>
|
||||
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
|
||||
(hasProp(data, "value") || hasProp(data, valueLabel))
|
||||
function getChartOptions(rows = []) {
|
||||
// Initialise default chart
|
||||
let builder = new ApexOptionsBuilder()
|
||||
.type("bar")
|
||||
.color(color)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.xLabel(xAxisLabel)
|
||||
.yLabel(yAxisLabel)
|
||||
.horizontal(horizontal)
|
||||
.dataLabels(dataLabels)
|
||||
.animate(animate)
|
||||
|
||||
function bindChartUIProps() {
|
||||
chart.numberFormat(".0f")
|
||||
chart.labelsNumberFormat(".1f")
|
||||
// Add data if valid datasource
|
||||
if (rows && rows.length) {
|
||||
rows = rows.slice(0, 50)
|
||||
if (!isEmpty(nameLabel) && !isNaN(rows[0][valueLabel])) {
|
||||
builder = builder.series([
|
||||
{
|
||||
name: valueLabel,
|
||||
data: rows.map(row => row[valueLabel]),
|
||||
},
|
||||
])
|
||||
}
|
||||
if (!isEmpty(nameLabel)) {
|
||||
builder = builder.categories(rows.map(row => row[nameLabel]))
|
||||
}
|
||||
}
|
||||
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(gradient)) {
|
||||
chart.chartGradient(chartGradient)
|
||||
}
|
||||
if (notNull(xAxisLabel)) {
|
||||
chart.xAxisLabel(xAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(betweenBarsPadding)) {
|
||||
chart.betweenBarsPadding(Number(betweenBarsPadding))
|
||||
}
|
||||
if (notNull(enableLabels)) {
|
||||
chart.enableLabels(enableLabels)
|
||||
}
|
||||
if (notNull(hasPercentage)) {
|
||||
chart.hasPercentage(hasPercentage)
|
||||
}
|
||||
if (notNull(hasSingleBarHighlight)) {
|
||||
chart.hasSingleBarHighlight(hasSingleBarHighlight)
|
||||
}
|
||||
if (notNull(labelsMargin)) {
|
||||
chart.labelsMargin(labelsMargin)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(highlightBarFunction)) {
|
||||
chart.highlightBarFunction(highlightBarFunction)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(isHorizontal)) {
|
||||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(xAxisLabelOffset)) {
|
||||
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
|
||||
}
|
||||
if (notNull(labelsNumberFormat)) {
|
||||
chart.labelsNumberFormat(labelsNumberFormat)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(nameLabel)) {
|
||||
chart.nameLabel(nameLabel)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(labelsSize)) {
|
||||
chart.labelsSize(labelsSize)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
if (notNull(percentageAxisToMaxRatio)) {
|
||||
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
|
||||
}
|
||||
chartContainer.datum(data).call(chart)
|
||||
// Build chart options
|
||||
return builder.getOptions()
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", customMouseOver)
|
||||
}
|
||||
if (customClick) {
|
||||
chart.on("customClick", customClick)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
tooltip.numberFormat(".0f")
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
$: chartGradient = getChartGradient(gradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
<div use:chart={options} />
|
||||
|
|
|
|||
|
|
@ -1,118 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
/*
|
||||
ISSUES
|
||||
- Chart gradient doesn't seem to do anything
|
||||
*/
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.brush()
|
||||
const chartClass = `brush-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let customBrushEnd = null
|
||||
export let customBrushStart = null
|
||||
|
||||
export let data = []
|
||||
export let gradient = null
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
|
||||
export let dateRange = null
|
||||
export let locale = null
|
||||
export let roundingTimeInterval = null
|
||||
export let xAxisFormat = null
|
||||
export let xTicks = null
|
||||
export let xAxisCustomFormat = null
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(gradient)) {
|
||||
chart.gradient(chartGradient)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(dateRange)) {
|
||||
chart.dateRange(dateRange)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(roundingTimeInterval)) {
|
||||
chart.roundingTimeInterval(roundingTimeInterval)
|
||||
}
|
||||
if (notNull(xAxisFormat)) {
|
||||
chart.xAxisFormat(xAxisFormat)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(xAxisCustomFormat)) {
|
||||
chart.xAxisCustomFormat(xAxisCustomFormat)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customBrushEnd) {
|
||||
chart.on("customBrushEnd", customBrushEnd)
|
||||
}
|
||||
if (customBrushStart) {
|
||||
chart.on("customBrushStart", customBrushStart)
|
||||
}
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: chartGradient = getChartGradient(gradient)
|
||||
$: console.log(chartGradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.bullet()
|
||||
const chartClass = `bullet-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let aspectRatio = null
|
||||
export let color = "britecharts"
|
||||
export let customSubtitle = null
|
||||
export let customTitle = null
|
||||
export let numberFormat = null
|
||||
export let paddingBetweenAxisAndChart = null
|
||||
export let startMaxRangeOpacity = null
|
||||
export let ticks = null
|
||||
export let isReverse = false
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(customSubtitle)) {
|
||||
chart.customSubtitle(customSubtitle)
|
||||
}
|
||||
if (notNull(customTitle)) {
|
||||
chart.customTitle(customTitle)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(paddingBetweenAxisAndChart)) {
|
||||
chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart)
|
||||
}
|
||||
if (notNull(startMaxRangeOpacity)) {
|
||||
chart.startMaxRangeOpacity(startMaxRangeOpacity)
|
||||
}
|
||||
if (notNull(ticks)) {
|
||||
chart.ticks(ticks)
|
||||
}
|
||||
if (notNull(isReverse)) {
|
||||
chart.isReverse(isReverse)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
<script context="module">
|
||||
//expose chart types for use or reference outside compnent
|
||||
export const chartTypes = britecharts ? Object.keys(britecharts) : null
|
||||
|
||||
//expose chart color schemas for use or reference outside compnent
|
||||
export const colorSchemas = britecharts
|
||||
? britecharts.colors.colorSchemas
|
||||
: null
|
||||
|
||||
//export color gradients for use or reference outside the component
|
||||
export const colorGradients = britecharts
|
||||
? britecharts.colors.colorGradients
|
||||
: null
|
||||
|
||||
export const getColorSchema = color =>
|
||||
color ? colorSchemas[color] : colorSchemas["britecharts"]
|
||||
|
||||
export const getChartGradient = gradient =>
|
||||
gradient ? colorGradients[gradient] : null
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { beforeUpdate } from "svelte"
|
||||
import britecharts from "britecharts"
|
||||
import { select } from "d3-selection"
|
||||
|
||||
import { onMount } from "svelte"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let type = "bar"
|
||||
export let data = []
|
||||
export let tooltipProps = null
|
||||
export let legendProps = null
|
||||
export let useTooltip = false
|
||||
export let useLegend = false
|
||||
|
||||
export let tooltip = null //can bind to outside the component and therefore access
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
let tooltipContainer = null
|
||||
let legendContainer = null
|
||||
let legend = null
|
||||
|
||||
let chart = chartTypes.includes(type) ? britecharts[type]() : null
|
||||
|
||||
const chartClass = `chart-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
bindChartLegend()
|
||||
} else {
|
||||
console.error("Britecharts could not be found")
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartTooltip() {
|
||||
if (useTooltip) {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
|
||||
bindProps(tooltip, tooltipProps)
|
||||
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartLegend() {
|
||||
if (useLegend) {
|
||||
if (!Array.isArray(data)) {
|
||||
console.warn("Cannot use legend as data is not an array")
|
||||
return
|
||||
}
|
||||
|
||||
let excludeProps = []
|
||||
|
||||
legend = britecharts.legend()
|
||||
|
||||
if (!legendProps || !legendProps.width) {
|
||||
excludeProps = ["width"]
|
||||
legend.width(chart.width())
|
||||
}
|
||||
|
||||
if (legendProps) {
|
||||
bindProps(legend, legendProps, excludeProps)
|
||||
}
|
||||
|
||||
legendContainer = select(`.${legendClass}`)
|
||||
legendContainer.datum(data).call(legend)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if ($$props.on) {
|
||||
const events = Object.entries($$props.on)
|
||||
for (let [type, fn] of events) {
|
||||
if (fn) {
|
||||
chart.on(type, fn)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
const excludeProps = [
|
||||
"data",
|
||||
"type",
|
||||
"on",
|
||||
"useTooltip",
|
||||
"tooltip",
|
||||
"tooltipProps",
|
||||
"legendProps",
|
||||
"useLegend",
|
||||
]
|
||||
|
||||
if (!$$props.width) {
|
||||
chart.width(chartElement.getBoundingClientRect().width)
|
||||
}
|
||||
|
||||
bindProps(chart, $$props, excludeProps)
|
||||
}
|
||||
|
||||
function bindProps(element, elProps, excludeArray) {
|
||||
if (elProps) {
|
||||
const props = excludeArray
|
||||
? Object.entries(excludeProps(elProps, excludeArray))
|
||||
: Object.entries(elProps)
|
||||
|
||||
const validElementProps = Object.getOwnPropertyNames(element)
|
||||
|
||||
for (let [prop, value] of props) {
|
||||
if (validElementProps.includes(prop)) {
|
||||
if (!!value) {
|
||||
chart[prop](value)
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`${type} - ${prop} is an unrecognised chart prop and wont be applied`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function excludeProps(props, propsToExclude) {
|
||||
const modifiedProps = {}
|
||||
for (const prop in props) {
|
||||
if (!propsToExclude.includes(prop)) {
|
||||
modifiedProps[prop] = props[prop]
|
||||
}
|
||||
}
|
||||
return modifiedProps
|
||||
}
|
||||
|
||||
$: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, notNull } from "./utils.js"
|
||||
import fetchData from "../fetchData.js"
|
||||
import Legend from "./Legend.svelte"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.donut()
|
||||
const chartClass = `donut-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
let legendChart
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
let chartSvgWidth = 0
|
||||
let chartSvg = null
|
||||
|
||||
export let _bb
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
export let customMouseMove = null
|
||||
export let customClick = null
|
||||
|
||||
export let orderingFunction = null
|
||||
|
||||
let data = []
|
||||
export let datasource = {}
|
||||
|
||||
export let color = "britecharts"
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = null
|
||||
|
||||
export let centeredTextFunction = null
|
||||
export let externalRadius = 25
|
||||
export let percentageFormat = null
|
||||
export let hasFixedHighlightedSlice = false
|
||||
export let hasLastHoverSliceHighlighted = false
|
||||
export let hasHoverAnimation = true
|
||||
export let highlightSliceById = null
|
||||
export let numberFormat = null
|
||||
export let internalRadius = 25
|
||||
export let isAnimated = true
|
||||
export let radiusHoverOffset = 0
|
||||
export let nameKey = null
|
||||
export let valueKey = null
|
||||
// export let useLegend = true
|
||||
export let horizontalLegend = false
|
||||
export let legendWidth = null
|
||||
export let legendHeight = null
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (!isEmpty(datasource)) {
|
||||
let _data = await fetchData(datasource)
|
||||
data = checkAndReformatData(_data)
|
||||
if (data.length === 0) {
|
||||
console.error(
|
||||
"Donut - please provide a valid name and value field for the chart"
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
chart.emptyDataConfig({
|
||||
showEmptySlice: true,
|
||||
emptySliceColor: "#F0F0F0",
|
||||
})
|
||||
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function checkAndReformatData(data) {
|
||||
let _data = [...data]
|
||||
|
||||
if (valueKey && valueKey !== "quantity") {
|
||||
_data = reformatDataKey(_data, valueKey, "quantity")
|
||||
}
|
||||
|
||||
if (nameKey && nameKey !== "name") {
|
||||
_data = reformatDataKey(_data, nameKey, "name")
|
||||
}
|
||||
|
||||
return _data.every(d => d.quantity) && _data.every(d => d.name) ? _data : []
|
||||
}
|
||||
|
||||
function reformatDataKey(data = [], dataKey = null, formatKey = null) {
|
||||
let ignoreList = ["_id", "_rev", "id"]
|
||||
if (dataKey && data.every(d => d[dataKey])) {
|
||||
return data.map(d => {
|
||||
let clonedRow = { ...d }
|
||||
if (clonedRow[formatKey]) {
|
||||
delete clonedRow[formatKey]
|
||||
}
|
||||
let value = clonedRow[dataKey]
|
||||
if (!ignoreList.includes(dataKey)) {
|
||||
delete clonedRow[dataKey]
|
||||
}
|
||||
clonedRow[formatKey] = value
|
||||
return clonedRow
|
||||
})
|
||||
} else {
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
chart.percentageFormat(".0f")
|
||||
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(getColorSchema(color))
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(centeredTextFunction)) {
|
||||
chart.centeredTextFunction(centeredTextFunction)
|
||||
}
|
||||
if (notNull(externalRadius)) {
|
||||
chart.externalRadius(externalRadius)
|
||||
}
|
||||
if (notNull(percentageFormat)) {
|
||||
chart.percentageFormat(percentageFormat)
|
||||
}
|
||||
if (notNull(hasFixedHighlightedSlice)) {
|
||||
chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice)
|
||||
}
|
||||
if (notNull(hasLastHoverSliceHighlighted)) {
|
||||
chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted)
|
||||
}
|
||||
if (notNull(hasHoverAnimation)) {
|
||||
chart.hasHoverAnimation(hasHoverAnimation)
|
||||
}
|
||||
if (notNull(highlightSliceById)) {
|
||||
chart.highlightSliceById(highlightSliceById)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(internalRadius)) {
|
||||
chart.internalRadius(internalRadius)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(radiusHoverOffset)) {
|
||||
chart.radiusHoverOffset(radiusHoverOffset)
|
||||
}
|
||||
if (notNull(orderingFunction)) {
|
||||
chart.orderingFunction(orderingFunction)
|
||||
}
|
||||
chartContainer.datum(data).call(chart)
|
||||
chartSvg = document.querySelector(`.${chartClass} .britechart`)
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customClick) {
|
||||
chart.on("customClick", customClick)
|
||||
}
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
|
||||
if (legendChart) {
|
||||
chart.on("customMouseOut", function() {
|
||||
legendChart.clearHighlight()
|
||||
})
|
||||
chart.on("customMouseOver", function(data) {
|
||||
legendChart.highlight(data.data.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$: if (!width && chartSvg) {
|
||||
width = chartSvg.clientWidth
|
||||
chart.width(width)
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if data.length > 0}
|
||||
<Legend
|
||||
bind:legend={legendChart}
|
||||
{colorSchema}
|
||||
useLegend
|
||||
isHorizontal={horizontalLegend}
|
||||
width={legendWidth || width}
|
||||
height={legendHeight}
|
||||
{chartClass}
|
||||
{data} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
|
||||
import Tooltip from "./Tooltip.svelte"
|
||||
import fetchData from "../fetchData.js"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.groupedBar()
|
||||
const chartClass = `groupedbar-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let tooltip = britecharts.tooltip()
|
||||
let tooltipContainer
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let customClick = null
|
||||
|
||||
let data = []
|
||||
export let datasource = {}
|
||||
export let color = "britecharts"
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = null
|
||||
export let aspectRatio = null
|
||||
export let grid = null
|
||||
export let groupLabel = null
|
||||
export let isAnimated = null
|
||||
export let isHorizontal = null
|
||||
export let nameLabel = null
|
||||
export let valueLabel = null
|
||||
export let valueLabelFormat = null
|
||||
export let xTicks = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let yTicks = null
|
||||
export let yTickTextOffset = null
|
||||
export let tooltipTitle = ""
|
||||
|
||||
const schemaIsValid = () =>
|
||||
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
|
||||
(hasProp(data, "group") || hasProp(data, groupLabel)) &&
|
||||
(hasProp(data, "value") || hasProp(data, valueLabel))
|
||||
|
||||
onMount(async () => {
|
||||
if (!isEmpty(datasource)) {
|
||||
data = await fetchData(datasource)
|
||||
if (schemaIsValid()) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindTooltip()
|
||||
} else {
|
||||
console.error(
|
||||
"Grouped bar - Please provide valid name, value and group labels"
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function bindTooltip() {
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltip.topicLabel("values")
|
||||
tooltip.shouldShowDateInTitle(false)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(groupLabel)) {
|
||||
chart.groupLabel(groupLabel)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(isHorizontal)) {
|
||||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (notNull(nameLabel)) {
|
||||
chart.nameLabel(nameLabel)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(valueLabelFormat)) {
|
||||
chart.valueLabelFormat(valueLabelFormat)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
if (notNull(yTickTextOffset)) {
|
||||
chart.yTickTextOffset(yTickTextOffset)
|
||||
}
|
||||
if (notNull(tooltipTitle)) {
|
||||
tooltip.title(tooltipTitle)
|
||||
} else if (datasource.label) {
|
||||
tooltip.title(datasource.label)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customClick) {
|
||||
chart.on("customClick", customClick)
|
||||
}
|
||||
chart.on("customMouseMove", tooltip.update)
|
||||
chart.on("customMouseOut", tooltip.hide)
|
||||
chart.on("customMouseOver", tooltip.show)
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.heatmap()
|
||||
const chartClass = `heatmap-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let color = "britecharts"
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
export let useLegend = true
|
||||
export let yAxisLabels = null
|
||||
export let boxSize = null
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(boxSize)) {
|
||||
chart.boxSize(boxSize)
|
||||
}
|
||||
if (notNull(yAxisLabels)) {
|
||||
chart.yAxisLabels(yAxisLabels)
|
||||
}
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<script>
|
||||
import britecharts from "britecharts"
|
||||
import { notNull } from "./utils"
|
||||
import { select } from "d3-selection"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let useLegend = true
|
||||
export let data = []
|
||||
export let width = null
|
||||
export let height = null
|
||||
export let colorSchema = null
|
||||
export let highlight = null
|
||||
export let highlightByEntryId = null
|
||||
export let isHorizontal = false
|
||||
export let margin = null
|
||||
export let marginRatio = null
|
||||
export let markerSize = null
|
||||
export let numberFormat = null
|
||||
export let unit = null
|
||||
|
||||
export let legend = britecharts.legend() //exported it can be bound to
|
||||
let legendContainer = null
|
||||
let legendElement = null
|
||||
|
||||
$: {
|
||||
if (legendElement) {
|
||||
legendContainer = select(legendElement)
|
||||
legend.numberFormat(".0f")
|
||||
|
||||
if (width) {
|
||||
legend.width(width)
|
||||
}
|
||||
|
||||
if (notNull(height)) {
|
||||
legend.height(height)
|
||||
}
|
||||
|
||||
if (notNull(colorSchema)) {
|
||||
legend.colorSchema(colorSchema)
|
||||
}
|
||||
|
||||
if (notNull(highlight)) {
|
||||
legend.highlight(highlight)
|
||||
}
|
||||
|
||||
if (notNull(highlightByEntryId)) {
|
||||
legend.highlightByEntryId(highlightByEntryId)
|
||||
}
|
||||
|
||||
if (notNull(isHorizontal)) {
|
||||
legend.isHorizontal(isHorizontal)
|
||||
}
|
||||
|
||||
if (notNull(margin)) {
|
||||
legend.margin(margin)
|
||||
}
|
||||
|
||||
if (notNull(marginRatio)) {
|
||||
legend.marginRatio(marginRatio)
|
||||
}
|
||||
|
||||
if (notNull(markerSize)) {
|
||||
legend.markerSize(markerSize)
|
||||
}
|
||||
|
||||
if (notNull(numberFormat)) {
|
||||
legend.numberFormat(numberFormat)
|
||||
}
|
||||
|
||||
if (notNull(unit)) {
|
||||
legend.unit(unit)
|
||||
}
|
||||
|
||||
legendContainer.datum(data).call(legend)
|
||||
}
|
||||
}
|
||||
|
||||
const legendClass = `legend-container`
|
||||
</script>
|
||||
|
||||
{#if useLegend}
|
||||
<div
|
||||
bind:this={legendElement}
|
||||
style={`width: ${width}px`}
|
||||
class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
|
||||
import fetchData from "../fetchData.js"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let datasource = {}
|
||||
|
||||
const chart = britecharts.line()
|
||||
const chartClass = `line-container-${_id}`
|
||||
|
||||
let data = { dataByTopic: [] }
|
||||
|
||||
let chartElement
|
||||
let chartContainer
|
||||
let tooltipContainer
|
||||
|
||||
let tooltip = britecharts.tooltip()
|
||||
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (
|
||||
dataPoint,
|
||||
topicColorMap,
|
||||
dataPointXPosition,
|
||||
yPosition
|
||||
) => {
|
||||
tooltip.update(dataPoint, topicColorMap, dataPointXPosition, yPosition)
|
||||
}
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
|
||||
export let customDataEntryClick = null
|
||||
export let customTouchMove = null
|
||||
|
||||
export let color = "britecharts"
|
||||
export let axisTimeCombinations = ""
|
||||
export let grid = "horizontal"
|
||||
export let aspectRatio = 0.5
|
||||
export let width = null
|
||||
export let height = null
|
||||
export let isAnimated = true
|
||||
export let lineCurve = "linear" //see api for possible opts
|
||||
export let lineGradient = null
|
||||
export let locale = "en-GB"
|
||||
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"
|
||||
export let xAxisScale = "linear"
|
||||
export let xAxisFormat = "day-month"
|
||||
export let xAxisCustomFormat = "%H"
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelPadding = null
|
||||
export let lines = null //not handled by setting prop
|
||||
export let tooltipThreshold = null
|
||||
export let tooltipTitle = ""
|
||||
export let xTicks = ""
|
||||
export let yTicks = ""
|
||||
|
||||
onMount(async () => {
|
||||
if (!isEmpty(datasource)) {
|
||||
data = await getAndPrepareData()
|
||||
|
||||
if (data.dataByTopic.length > 0) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
|
||||
// Hack 🤮 X Axis Label and last tick label gets cut off unless we do this 👇
|
||||
const chartSvg = document.querySelector(`.${chartClass} .britechart`)
|
||||
if (chartSvg) {
|
||||
let height = chartSvg.getAttribute("height")
|
||||
let width = chartSvg.getAttribute("width")
|
||||
height = parseInt(height) + 35
|
||||
width = parseInt(width) + 15
|
||||
chartSvg.setAttribute("height", height)
|
||||
chartSvg.setAttribute("width", width)
|
||||
}
|
||||
|
||||
bindTooltip()
|
||||
} else {
|
||||
console.error(
|
||||
"Line Chart - Please provide valid name, value and topic labels"
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function bindTooltip() {
|
||||
tooltipContainer = select(
|
||||
`.${chartClass} .metadata-group .vertical-marker-container`
|
||||
)
|
||||
tooltip.topicLabel("topics")
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
const schemaIsValid = data =>
|
||||
hasProp(data, valueLabel) &&
|
||||
hasProp(data, dateLabel) &&
|
||||
hasProp(data, topicLabel)
|
||||
|
||||
async function getAndPrepareData() {
|
||||
let dataByTopic = []
|
||||
let _data = []
|
||||
|
||||
if (!topicLabel) {
|
||||
topicLabel = "topicName"
|
||||
}
|
||||
|
||||
if (!valueLabel) {
|
||||
valueLabel = "value"
|
||||
}
|
||||
|
||||
if (!dateLabel) {
|
||||
dateLabel = "date"
|
||||
}
|
||||
|
||||
_data = await fetchData(datasource)
|
||||
|
||||
if (schemaIsValid(_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],
|
||||
}))
|
||||
.sort((a, b) => a.date - b.date),
|
||||
}
|
||||
dataByTopic.push(d)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return { dataByTopic }
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
chart.tooltipThreshold(800)
|
||||
chart.aspectRatio(0.5)
|
||||
chart.xAxisCustomFormat("%e %b %Y")
|
||||
chart.xTicks(data.dataByTopic.length)
|
||||
|
||||
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)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(Number(xTicks))
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(Number(yTicks))
|
||||
}
|
||||
if (notNull(tooltipTitle)) {
|
||||
tooltip.title(tooltipTitle)
|
||||
} else if (datasource.label) {
|
||||
tooltip.title(datasource.label)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", tooltip.show)
|
||||
}
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", tooltip.update)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", tooltip.hide)
|
||||
}
|
||||
if (customDataEntryClick) {
|
||||
chart.on("customDataEntryClick", customDataEntryClick)
|
||||
}
|
||||
if (customTouchMove) {
|
||||
chart.on("customTouchMove", customTouchMove)
|
||||
}
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
$: chartGradient = getChartGradient(lineGradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.scatterPlot()
|
||||
const chartClass = `scatterplot-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
let tooltip
|
||||
let tooltipContainer
|
||||
|
||||
export let customClick = null
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (
|
||||
dataPoint,
|
||||
colorMapping,
|
||||
xPosition,
|
||||
yPosition = null
|
||||
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
|
||||
|
||||
export let data = []
|
||||
export let color = "britecharts"
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let margin = null
|
||||
export let aspectRatio = null
|
||||
export let circleOpacity = null
|
||||
export let grid = null
|
||||
export let hasCrossHairs = null
|
||||
export let hasHollowCircles = null
|
||||
export let hasTrendline = null
|
||||
export let highlightTextLegendOffset = null
|
||||
export let isAnimated = null
|
||||
export let maxCircleArea = null
|
||||
export let xAxisFormat = null
|
||||
export let xAxisLabel = null
|
||||
export let xAxisLabelOffset = null
|
||||
export let xTicks = null
|
||||
export let yAxisFormat = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let yTicks = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.width(margin)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(circleOpacity)) {
|
||||
chart.circleOpacity(circleOpacity)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(hasCrossHairs)) {
|
||||
chart.hasCrossHairs(hasCrossHairs)
|
||||
}
|
||||
if (notNull(hasHollowCircles)) {
|
||||
chart.hasHollowCircles(hasHollowCircles)
|
||||
}
|
||||
if (notNull(hasTrendline)) {
|
||||
chart.hasTrendline(hasTrendline)
|
||||
}
|
||||
if (notNull(highlightTextLegendOffset)) {
|
||||
chart.highlightTextLegendOffset(highlightTextLegendOffset)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(maxCircleArea)) {
|
||||
chart.maxCircleArea(maxCircleArea)
|
||||
}
|
||||
if (notNull(xAxisFormat)) {
|
||||
chart.xAxisFormat(xAxisFormat)
|
||||
}
|
||||
if (notNull(xAxisLabel)) {
|
||||
chart.xAxisLabel(xAxisLabel)
|
||||
}
|
||||
if (notNull(xAxisLabelOffset)) {
|
||||
chart.xAxisLabelOffset(xAxisLabelOffset)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yAxisFormat)) {
|
||||
chart.yAxisFormat(yAxisFormat)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customClick) {
|
||||
chart.on("customClick", customClick)
|
||||
}
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", customMouseOver)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
//TODO: May be more apt to use tooltip() here. Currently erroring however
|
||||
tooltip = britecharts.miniTooltip()
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
// tooltip
|
||||
// .title("Temperature")
|
||||
// .valueLabel("y")
|
||||
// .nameLabel("x")
|
||||
// .numberFormat("$")
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.sparkline()
|
||||
const chartClass = `sparkline-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let areaGradient = null
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let dateLabel = null
|
||||
export let duration = null
|
||||
export let isAnimated = null
|
||||
export let lineGradient = null
|
||||
export let titleText = null
|
||||
export let titleTextStyle = null
|
||||
export let valueLabel = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(areaGradient)) {
|
||||
chart.areaGradient(aGradient)
|
||||
}
|
||||
if (notNull(lineGradient)) {
|
||||
chart.lineGradient(lGradient)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(dateLabel)) {
|
||||
chart.dateLabel(dateLabel)
|
||||
}
|
||||
if (notNull(duration)) {
|
||||
chart.duration(duration)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(titleText)) {
|
||||
chart.titleText(titleText)
|
||||
}
|
||||
if (notNull(titleTextStyle)) {
|
||||
chart.titleTextStyle(titleTextStyle)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: aGradient = getChartGradient(areaGradient)
|
||||
$: lGradient = getChartGradient(lineGradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.stackedArea()
|
||||
const chartClass = `stackedarea-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (
|
||||
dataPoint,
|
||||
colorMapping,
|
||||
xPosition,
|
||||
yPosition = null
|
||||
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
|
||||
export let data = []
|
||||
export let color = "britecharts"
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let margin = null
|
||||
export let areaCurve = null
|
||||
export let areaOpacity = null
|
||||
export let aspectRatio = null
|
||||
export let dateLabel = null
|
||||
export let grid = null
|
||||
export let isAnimated = null
|
||||
export let keyLabel = null
|
||||
export let locale = null
|
||||
export let tooltipThreshold = null
|
||||
export let topicsOrder = null
|
||||
export let valueLabel = null
|
||||
export let xAxisCustomFormat = null
|
||||
export let xAxisFormat = null
|
||||
export let xAxisScale = null
|
||||
export let xAxisValueType = null
|
||||
export let xTicks = null
|
||||
export let yAxisBaseline = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let yTicks = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(areaCurve)) {
|
||||
chart.areaCurve(areaCurve)
|
||||
}
|
||||
if (notNull(areaOpacity)) {
|
||||
chart.areaOpacity(areaOpacity)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(dateLabel)) {
|
||||
chart.dateLabel(dateLabel)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(keyLabel)) {
|
||||
chart.keyLabel(keyLabel)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(tooltipThreshold)) {
|
||||
chart.tooltipThreshold(tooltipThreshold)
|
||||
}
|
||||
if (notNull(topicsOrder)) {
|
||||
chart.topicsOrder(topicsOrder)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(xAxisCustomFormat)) {
|
||||
chart.xAxisCustomFormat(xAxisCustomFormat)
|
||||
}
|
||||
if (notNull(xAxisFormat)) {
|
||||
chart.xAxisFormat(xAxisFormat)
|
||||
}
|
||||
if (notNull(xAxisScale)) {
|
||||
chart.xAxisScale(xAxisScale)
|
||||
}
|
||||
if (notNull(xAxisValueType)) {
|
||||
chart.xAxisValueType(xAxisValueType)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yAxisBaseline)) {
|
||||
chart.yAxisBaseline(yAxisBaseline)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", customMouseOver)
|
||||
}
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.stackedBar()
|
||||
const chartClass = `stackedbar-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
let tooltip
|
||||
let tooltipContainer
|
||||
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (dataPoint, colorMapping, xPosition) =>
|
||||
tooltip.update(dataPoint, colorMapping, xPosition)
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
|
||||
export let data = []
|
||||
export let color = "britecharts"
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let margin = null
|
||||
export let aspectRatio = null
|
||||
export let betweenBarsPadding = null
|
||||
export let grid = null
|
||||
export let hasPercentage = null
|
||||
export let hasReversedStacks = null
|
||||
export let isAnimated = null
|
||||
export let isHorizontal = null
|
||||
export let locale = null
|
||||
export let nameLabel = null
|
||||
export let percentageAxisToMaxRatio = null
|
||||
export let stackLabel = null
|
||||
export let valueLabel = null
|
||||
export let valueLabelFormat = null
|
||||
export let xTicks = null
|
||||
export let yTicks = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
// bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
//UI PROPS
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(betweenBarsPadding)) {
|
||||
chart.betweenBarsPadding(betweenBarsPadding)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(hasPercentage)) {
|
||||
chart.hasPercentage(hasPercentage)
|
||||
}
|
||||
if (notNull(hasReversedStacks)) {
|
||||
chart.hasReversedStacks(hasReversedStacks)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(isHorizontal)) {
|
||||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(nameLabel)) {
|
||||
chart.nameLabel(nameLabel)
|
||||
}
|
||||
if (notNull(percentageAxisToMaxRatio)) {
|
||||
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
|
||||
}
|
||||
if (notNull(stackLabel)) {
|
||||
chart.stackLabel(stackLabel)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(valueLabelFormat)) {
|
||||
chart.valueLabelFormat(valueLabelFormat)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", customMouseOver)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.tooltip()
|
||||
// tooltip.topicLabel("Hi Im the topic")
|
||||
// tooltip.topicsOrder(["x", "y"])
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
/*
|
||||
ISSUES - Doesn't seem to allow color change. Chart is colored black by default
|
||||
*/
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
const chart = britecharts.step()
|
||||
const chartClass = `step-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
let tooltip
|
||||
let tooltipContainer
|
||||
|
||||
export let customMouseOver = () => tooltip.show()
|
||||
export let customMouseMove = (
|
||||
dataPoint,
|
||||
colorMapping,
|
||||
xPosition,
|
||||
yPosition = null
|
||||
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
|
||||
export let customMouseOut = () => tooltip.hide()
|
||||
|
||||
export let data = []
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let margin = null
|
||||
export let xAxisLabel = null
|
||||
export let xAxisLabelOffset = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let yTicks = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(async () => {
|
||||
if (chart) {
|
||||
if (table) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(_data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(xAxisLabel)) {
|
||||
chart.xAxisLabel(xAxisLabel)
|
||||
}
|
||||
if (notNull(xAxisLabelOffset)) {
|
||||
chart.xAxisLabelOffset(xAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customMouseOver) {
|
||||
chart.on("customMouseOver", customMouseOver)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
$: _data = table ? $store[table] : data
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.chartname()
|
||||
const chartClass = `donut-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let color = "britecharts"
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
export let useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script>
|
||||
import { notNull } from "./utils"
|
||||
import { onMount } from "svelte"
|
||||
import { select } from "d3-selection"
|
||||
|
||||
import britecharts from "britecharts"
|
||||
|
||||
export const tooltip = britecharts.tooltip()
|
||||
|
||||
export let chartClass = ""
|
||||
let tooltipContainer
|
||||
|
||||
export let axisTimeCombinations = null
|
||||
export let dateCustomFormat = null
|
||||
export let dateFormat = null
|
||||
export let dateLabel = null
|
||||
export let locale = null
|
||||
export let nameLabel = null
|
||||
export let numberFormat = null
|
||||
export let shouldShowDateInTitle = false
|
||||
export let title = "My Tooltip"
|
||||
export let tooltipOffset = null
|
||||
export let topicLabel = "values"
|
||||
export let topicsOrder = null
|
||||
export let valueLabel = null
|
||||
export let xAxisValueType = null
|
||||
|
||||
onMount(() => {
|
||||
tooltipContainer = select(
|
||||
`.${chartClass} .metadata-group .vertical-marker-container`
|
||||
)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
})
|
||||
|
||||
$: if (tooltipContainer) {
|
||||
if (notNull(axisTimeCombinations)) {
|
||||
tooltip.axisTimeCombinations(axisTimeCombinations)
|
||||
}
|
||||
if (notNull(dateCustomFormat)) {
|
||||
tooltip.dateCustomFormat(dateCustomFormat)
|
||||
}
|
||||
if (notNull(dateFormat)) {
|
||||
tooltip.dateFormat(dateFormat)
|
||||
}
|
||||
if (notNull(dateLabel)) {
|
||||
tooltip.dateLabel(dateLabel)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
tooltip.locale(locale)
|
||||
}
|
||||
if (notNull(nameLabel)) {
|
||||
tooltip.nameLabel(nameLabel)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
tooltip.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(shouldShowDateInTitle)) {
|
||||
tooltip.shouldShowDateInTitle(shouldShowDateInTitle)
|
||||
}
|
||||
if (notNull(title)) {
|
||||
tooltip.title(title)
|
||||
}
|
||||
if (notNull(tooltipOffset)) {
|
||||
tooltip.tooltipOffset(tooltipOffset)
|
||||
}
|
||||
if (notNull(topicLabel)) {
|
||||
tooltip.topicLabel(topicLabel)
|
||||
}
|
||||
if (notNull(topicsOrder)) {
|
||||
tooltip.topicsOrder(topicsOrder)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
tooltip.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(xAxisValueType)) {
|
||||
tooltip.xAxisValueType(xAxisValueType)
|
||||
}
|
||||
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,14 +1,2 @@
|
|||
import "britecharts/dist/css/britecharts.min.css"
|
||||
|
||||
export { default as donut } from "./Donut.svelte"
|
||||
export { default as bar } from "./Bar.svelte"
|
||||
export { default as line } from "./Line.svelte"
|
||||
export { default as brush } from "./Brush.svelte"
|
||||
export { default as bullet } from "./Bullet.svelte"
|
||||
export { default as groupedbar } from "./GroupedBar.svelte"
|
||||
export { default as heatmap } from "./Heatmap.svelte"
|
||||
export { default as sparkline } from "./Sparkline.svelte"
|
||||
export { default as scatterplot } from "./ScatterPlot.svelte"
|
||||
export { default as step } from "./Step.svelte"
|
||||
export { default as stackedarea } from "./StackedArea.svelte"
|
||||
export { default as stackedbar } from "./StackedBar.svelte"
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
|
||||
|
||||
<script src="../../../node_modules/britecharts/dist/umd/bar.min.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<article>
|
||||
<h2 class="tutorial__heading">Bar Chart</h2>
|
||||
<div class="bar-chart"></div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
const dataset = [
|
||||
{
|
||||
"name": "Radiating",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"name": "Opalescent",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"name": "Shining",
|
||||
"value": 3
|
||||
},
|
||||
{
|
||||
"name": "Vibrant",
|
||||
"value": 6
|
||||
},
|
||||
{
|
||||
"name": "Vivid",
|
||||
"value": 6
|
||||
},
|
||||
{
|
||||
"name": "Brilliant",
|
||||
"value": 1
|
||||
}
|
||||
]
|
||||
|
||||
const barContainer = d3.select('.bar-chart');
|
||||
|
||||
const barChart = britecharts.bar()
|
||||
|
||||
barChart
|
||||
.width(700)
|
||||
.height(300)
|
||||
.enableLabels(true)
|
||||
.labelsNumberFormat('.0%')
|
||||
.isAnimated(true)
|
||||
.yAxisLabel("Quantity")
|
||||
.xAxisLabel("Color")
|
||||
.betweenBarsPadding("0.8")
|
||||
|
||||
// .on('customMouseOver', tooltip.show)
|
||||
// .on('customMouseMove', tooltip.update)
|
||||
// .on('customMouseOut', tooltip.hide);
|
||||
|
||||
barContainer.datum(dataset).call(barChart);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML Line</title>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/line.min.js"
|
||||
type="text/javascript"></script> -->
|
||||
|
||||
<script src="../../../node_modules/britecharts/dist/umd/line.min.js" type="text/javascript"></script>
|
||||
<script src="../../../node_modules/britecharts/dist/umd/tooltip.min.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<article>
|
||||
<div class="js-line-chart-container line-chart-container card--chart"></div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
const testData = {
|
||||
data: [
|
||||
{
|
||||
amount: 8,
|
||||
audited: new Date("2020-01-01T16:00:00-08:00"),
|
||||
city: "Belfast",
|
||||
name: 1,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "ceb87054790f480e80512368545755bb",
|
||||
_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
audited: new Date("2020-01-03T16:00:00-08:00"),
|
||||
city: "Belfast",
|
||||
name: 1,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "0a36103b55124f348a23d10b2f3ed0e3",
|
||||
_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
|
||||
},
|
||||
{
|
||||
amount: 6,
|
||||
audited: new Date("2020-01-04T16:00:00-08:00"),
|
||||
city: "Belfast",
|
||||
name: 1,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "68ade2bb94754caa8fc62c7084e3cef7",
|
||||
_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
|
||||
},
|
||||
{
|
||||
amount: 2,
|
||||
audited: new Date("2020-01-01T16:00:00-08:00"),
|
||||
city: "Dublin",
|
||||
name: 2,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "2ab6dabf833f4d99b3438fa4353ba429",
|
||||
_rev: "2-45b190489e76842981902cc9f04369ec",
|
||||
},
|
||||
{
|
||||
amount: 16,
|
||||
audited: new Date("2020-01-02T16:00:00-08:00"),
|
||||
city: "Dublin",
|
||||
name: 2,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "1b2ca36db1724427a98ba95547f946e0",
|
||||
_rev: "2-c43def17ada959948b9af5484ad5b6b7",
|
||||
},
|
||||
{
|
||||
amount: 7,
|
||||
audited: new Date("2020-01-03T16:00:00-08:00"),
|
||||
city: "Dublin",
|
||||
name: 2,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "d9235d884a224ca68ac30cefdbb8ae53",
|
||||
_rev: "2-695e426a261a25474cbf6b1f069dccb4",
|
||||
},
|
||||
{
|
||||
amount: 3,
|
||||
audited: new Date("2020-01-04T16:00:00-08:00"),
|
||||
city: "Dublin",
|
||||
name: 2,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "9f8bc39a9cfb4f779da8c998d7622927",
|
||||
_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
|
||||
},
|
||||
{
|
||||
amount: 4,
|
||||
audited: new Date("2020-01-02T16:00:00-08:00"),
|
||||
city: "London",
|
||||
name: 3,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_id: "75274e906073493bbf75cda8656e8db0",
|
||||
_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
|
||||
},
|
||||
{
|
||||
amount: 22,
|
||||
audited: new Date("2020-01-06T16:00:00-08:00"),
|
||||
city: "London",
|
||||
name: 3,
|
||||
tableId: "2334751ac0764c1a931bff5b6b6767eb",
|
||||
type: "row",
|
||||
_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()
|
||||
|
||||
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: [
|
||||
{
|
||||
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,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const lineContainer = d3.select('.js-line-chart-container');
|
||||
|
||||
const lineChart = britecharts.line()
|
||||
const tooltip = britecharts.tooltip()
|
||||
|
||||
lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true)
|
||||
|
||||
lineContainer.datum(newData).call(lineChart);
|
||||
|
||||
const tooltipContainer = d3.select(`.js-line-chart-container .metadata-group .vertical-marker-container`)
|
||||
|
||||
tooltip.title("yeooo")
|
||||
tooltip.topicLabel("topics")
|
||||
lineChart.on("customMouseOver", tooltip.show)
|
||||
lineChart.on("customMouseMove", tooltip.update)
|
||||
lineChart.on("customMouseOut", tooltip.hide)
|
||||
|
||||
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import britecharts from "britecharts"
|
||||
|
||||
export const notNull = value => value || value === false
|
||||
|
||||
export const hasProp = (data, prop) => data.every(d => prop in d)
|
||||
|
||||
export const chartTypes = britecharts ? Object.keys(britecharts) : null
|
||||
|
||||
//expose chart color schemas for use or reference outside compnent
|
||||
export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null
|
||||
|
||||
//export color gradients for use or reference outside the component
|
||||
export const colorGradients = britecharts
|
||||
? britecharts.colors.colorGradients
|
||||
: null
|
||||
|
||||
export const getColorSchema = color =>
|
||||
color ? colorSchemas[color] : colorSchemas["britecharts"]
|
||||
|
||||
export const getChartGradient = gradient =>
|
||||
gradient ? colorGradients[gradient] : null
|
||||
|
||||
export function reformatDataKey(data = [], dataKey = null, formatKey = null) {
|
||||
let ignoreList = ["_id", "_rev", "id"]
|
||||
if (dataKey && data.every(d => d[dataKey])) {
|
||||
return data.map(d => {
|
||||
let clonedRow = { ...d }
|
||||
if (clonedRow[formatKey]) {
|
||||
delete clonedRow[formatKey]
|
||||
}
|
||||
let value = clonedRow[dataKey]
|
||||
if (!ignoreList.includes(dataKey)) {
|
||||
delete clonedRow[dataKey]
|
||||
}
|
||||
clonedRow[formatKey] = value
|
||||
return clonedRow
|
||||
})
|
||||
} else {
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import FusionCharts from "fusioncharts"
|
||||
import Charts from "fusioncharts/fusioncharts.charts"
|
||||
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion"
|
||||
import SvelteFC, { fcRoot } from "svelte-fusioncharts"
|
||||
|
||||
fcRoot(FusionCharts, Charts, FusionTheme)
|
||||
|
||||
export let _bb
|
||||
export let table
|
||||
export let type = "column2d"
|
||||
|
||||
let store = _bb.store
|
||||
|
||||
$: chartConfigs = {
|
||||
type,
|
||||
width: "600",
|
||||
height: "400",
|
||||
dataFormat: "json",
|
||||
dataSource: {
|
||||
data: $store[table] || [],
|
||||
},
|
||||
}
|
||||
|
||||
$: console.log("CHART CONFIGS", chartConfigs)
|
||||
|
||||
async function fetchData() {
|
||||
const FETCH_ROWS_URL = `/api/views/all_${table}`
|
||||
const response = await _bb.api.get(FETCH_ROWS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state[table] = json
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch rows.", response)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="container">
|
||||
<SvelteFC {...chartConfigs} />
|
||||
</div>
|
||||
|
|
@ -5,7 +5,6 @@ export { default as text } from "./Text.svelte"
|
|||
export { default as heading } from "./Heading.svelte"
|
||||
export { default as input } from "./Input.svelte"
|
||||
export { default as textfield } from "./Textfield.svelte"
|
||||
|
||||
export { default as button } from "./Button.svelte"
|
||||
export { default as login } from "./Login.svelte"
|
||||
export { default as saveRowButton } from "./Templates/saveRowButton"
|
||||
|
|
@ -15,7 +14,6 @@ export { default as Navigation } from "./Navigation.svelte"
|
|||
export { default as datagrid } from "./DataGrid/Component.svelte"
|
||||
export { default as dataform } from "./DataForm.svelte"
|
||||
export { default as dataformwide } from "./DataFormWide.svelte"
|
||||
export { default as datachart } from "./DataChart.svelte"
|
||||
export { default as datalist } from "./DataList.svelte"
|
||||
export { default as list } from "./List.svelte"
|
||||
export { default as datasearch } from "./DataSearch.svelte"
|
||||
|
|
@ -26,5 +24,5 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
|
|||
export { default as rowdetail } from "./RowDetail.svelte"
|
||||
export { default as newrow } from "./NewRow.svelte"
|
||||
export { default as datepicker } from "./DatePicker.svelte"
|
||||
export * from "./Chart"
|
||||
export { default as icon } from "./Icon.svelte"
|
||||
export * from "./Chart"
|
||||
|
|
|
|||
Loading…
Reference in a new issue