StackedArea and other Chart Stuff
This commit is contained in:
cmack
parent
5b49660ce6
commit
264076886f
|
|
@ -533,6 +533,316 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Scatterplot",
|
||||||
|
_component: "@budibase/standard-components/scatterplot",
|
||||||
|
description: "Scatterplot chart",
|
||||||
|
icon: "ri-bar-chart-fill",
|
||||||
|
presetProps: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "topic",
|
||||||
|
x: 123,
|
||||||
|
y: 24,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topic1",
|
||||||
|
x: 53,
|
||||||
|
y: 31,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topic2",
|
||||||
|
x: 631,
|
||||||
|
y: 321,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topic1",
|
||||||
|
x: 231,
|
||||||
|
y: 111,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
settings: [
|
||||||
|
{
|
||||||
|
label: "Colors",
|
||||||
|
key: "color",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: [
|
||||||
|
{ label: "Normal", value: "britecharts" },
|
||||||
|
{ label: "Blue Green", value: "blueGreen" },
|
||||||
|
{ label: "Green", value: "green" },
|
||||||
|
{ label: "Grey", value: "grey" },
|
||||||
|
{ label: "Orange", value: "orange" },
|
||||||
|
{ label: "Pink", value: "pink" },
|
||||||
|
{ label: "Purple", value: "purple" },
|
||||||
|
{ label: "Red", value: "red" },
|
||||||
|
{ label: "Teal", value: "teal" },
|
||||||
|
{ label: "Yellow", value: "yellow" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "height",
|
||||||
|
key: "height",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Width",
|
||||||
|
key: "width",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Aspect Ratio",
|
||||||
|
key: "aspectRatio",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Circle Opacity",
|
||||||
|
key: "circleOpacity",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Grid",
|
||||||
|
key: "grid",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: ["vertical", "horizontal", "full"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Has Crosshairs",
|
||||||
|
key: "hasCrossHairs",
|
||||||
|
valueKey: "checked",
|
||||||
|
control: Checkbox,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Is Animated",
|
||||||
|
key: "isAnimated",
|
||||||
|
valueKey: "checked",
|
||||||
|
control: Checkbox,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Max Circle Area",
|
||||||
|
key: "maxCircleArea",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis Label",
|
||||||
|
key: "xAxisLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis Label Offset",
|
||||||
|
key: "xAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis",
|
||||||
|
key: "xTicks",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Format",
|
||||||
|
key: "yAxisFormat",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label",
|
||||||
|
key: "yAxisLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label Offset",
|
||||||
|
key: "yAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Ticks",
|
||||||
|
key: "yTicks",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "StackedArea",
|
||||||
|
_component: "@budibase/standard-components/stackedarea",
|
||||||
|
description: "StackedArea chart",
|
||||||
|
icon: "ri-bar-chart-fill",
|
||||||
|
presetProps: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
date: "2011-01-05T00:00:00Z",
|
||||||
|
name: "Direct",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
settings: [
|
||||||
|
{
|
||||||
|
label: "Color",
|
||||||
|
key: "color",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: [
|
||||||
|
"britecharts",
|
||||||
|
"blueGreen",
|
||||||
|
"green",
|
||||||
|
"grey",
|
||||||
|
"orange",
|
||||||
|
"pink",
|
||||||
|
"purple",
|
||||||
|
"red",
|
||||||
|
"teal",
|
||||||
|
"yellow",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Height",
|
||||||
|
key: "height",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Width",
|
||||||
|
key: "width",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Aspect Ratio",
|
||||||
|
key: "aspectRatio",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Height",
|
||||||
|
key: "height",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Grid",
|
||||||
|
key: "grid",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: ["vertical", "horizontal", "full"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis Label",
|
||||||
|
key: "xAxisLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis Label Offset",
|
||||||
|
key: "xAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis",
|
||||||
|
key: "yAxisLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label Offset",
|
||||||
|
key: "yAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Area Curve",
|
||||||
|
key: "areaCurve",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Area Opacity",
|
||||||
|
key: "areaOpacity",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Area Opacity",
|
||||||
|
key: "areaOpacity",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "dateLabel",
|
||||||
|
key: "dateLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "isAnimated",
|
||||||
|
label: "Is Animated",
|
||||||
|
valueKey: "checked",
|
||||||
|
control: Checkbox,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Key Label",
|
||||||
|
key: "keyLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Locale",
|
||||||
|
key: "locale",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Value Label",
|
||||||
|
key: "valueLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Use Legend",
|
||||||
|
key: "useLegend",
|
||||||
|
keyValue: "checked",
|
||||||
|
control: Checkbox,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Step",
|
||||||
|
_component: "@budibase/standard-components/step",
|
||||||
|
description: "Step chart",
|
||||||
|
icon: "ri-bar-chart-fill",
|
||||||
|
presetProps: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
key: "glittering",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
key: "luminous",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
settings: [
|
||||||
|
{
|
||||||
|
label: "height",
|
||||||
|
key: "height",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Width",
|
||||||
|
key: "width",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label",
|
||||||
|
key: "yAxisLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label Offset",
|
||||||
|
key: "yAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Ticks",
|
||||||
|
key: "yTicks",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Axis Label Offset",
|
||||||
|
key: "xAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Sparkline",
|
name: "Sparkline",
|
||||||
_component: "@budibase/standard-components/sparkline",
|
_component: "@budibase/standard-components/sparkline",
|
||||||
|
|
@ -742,6 +1052,7 @@ export default {
|
||||||
{
|
{
|
||||||
label: "Use Legend",
|
label: "Use Legend",
|
||||||
key: "useLegend",
|
key: "useLegend",
|
||||||
|
keyValue: "checked",
|
||||||
control: Checkbox,
|
control: Checkbox,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -1007,6 +1318,137 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Stacked Bar",
|
||||||
|
_component: "@budibase/standard-components/stackedbar",
|
||||||
|
description: "Stacked Bar Chart",
|
||||||
|
icon: "ri-file-list-fill",
|
||||||
|
presetProps: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "2011-01",
|
||||||
|
stack: "Direct",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
settings: [
|
||||||
|
{
|
||||||
|
label: "Colors",
|
||||||
|
key: "color",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: [
|
||||||
|
"britecharts",
|
||||||
|
"blueGreen",
|
||||||
|
"green",
|
||||||
|
"grey",
|
||||||
|
"orange",
|
||||||
|
"pink",
|
||||||
|
"purple",
|
||||||
|
"red",
|
||||||
|
"teal",
|
||||||
|
"yellow",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Grid",
|
||||||
|
key: "grid",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: ["vertical", "horizontal", "full"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Aspect Ratio",
|
||||||
|
key: "aspectRatio",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Between Bars Padding",
|
||||||
|
key: "betweenBarsPadding",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Max Ratio Percentage",
|
||||||
|
key: "percentageToMaxRatio",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Date Label",
|
||||||
|
key: "dateLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Name Label",
|
||||||
|
key: "nameLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Stack Label",
|
||||||
|
key: "stackLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Width",
|
||||||
|
key: "width",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Height",
|
||||||
|
key: "height",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Locale",
|
||||||
|
key: "locale",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Is Animated",
|
||||||
|
key: "isAnimated",
|
||||||
|
control: Checkbox,
|
||||||
|
valueKey: "checked",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Is Horizontal",
|
||||||
|
key: "isHorizontal",
|
||||||
|
control: Checkbox,
|
||||||
|
valueKey: "checked",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Has Reversed Stacks",
|
||||||
|
key: "hasReversedStacks",
|
||||||
|
control: Checkbox,
|
||||||
|
valueKey: "checked",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Has Percentage",
|
||||||
|
key: "hasPercentage",
|
||||||
|
control: Checkbox,
|
||||||
|
valueKey: "checked",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "X Ticks",
|
||||||
|
key: "xTicks",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Ticks",
|
||||||
|
key: "yTicks",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label",
|
||||||
|
key: "yTicksLabel",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Y Axis Label Offset",
|
||||||
|
key: "yAxisLabelOffset",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Line",
|
name: "Line",
|
||||||
_component: "@budibase/standard-components/line",
|
_component: "@budibase/standard-components/line",
|
||||||
|
|
|
||||||
|
|
@ -286,6 +286,103 @@
|
||||||
"valueLabel": "string"
|
"valueLabel": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"stackedbar": {
|
||||||
|
"description": "Stacked Bar Chart",
|
||||||
|
"data": true,
|
||||||
|
"props": {
|
||||||
|
"color": "string",
|
||||||
|
"height": "number",
|
||||||
|
"width": "number",
|
||||||
|
"margin": "string",
|
||||||
|
"aspectRatio": "string",
|
||||||
|
"betweenBarsPadding": "number",
|
||||||
|
"grid": "string",
|
||||||
|
"hasPercentage": "bool",
|
||||||
|
"hasReversedStacks": "bool",
|
||||||
|
"isAnimated": "bool",
|
||||||
|
"isHorizontal": "bool",
|
||||||
|
"locale": "string",
|
||||||
|
"nameLabel": "string",
|
||||||
|
"percentageAxisToMaxRatio": "number",
|
||||||
|
"stackLabel": "string",
|
||||||
|
"valueLabel": "string",
|
||||||
|
"valueLabelFormat": "string",
|
||||||
|
"xTicks": "number",
|
||||||
|
"yTicks": "number",
|
||||||
|
"yAxisLabel": "string",
|
||||||
|
"yAxisLabelOffset": "number",
|
||||||
|
"useLegend": "bool"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"stackarea": {
|
||||||
|
"description": "Step Chart",
|
||||||
|
"data": true,
|
||||||
|
"props": {
|
||||||
|
"color": "string",
|
||||||
|
"height": "number",
|
||||||
|
"width": "number",
|
||||||
|
"margin": "string",
|
||||||
|
"xAxisLabel": "string",
|
||||||
|
"xAxisLabelOffset": "string",
|
||||||
|
"yAxisLabel": "string",
|
||||||
|
"yAxisLabelOffset": "string",
|
||||||
|
"areaCurve": "number",
|
||||||
|
"areaOpacity": "number",
|
||||||
|
"aspectRatio": "number",
|
||||||
|
"dateLabel": "string",
|
||||||
|
"grid": "string",
|
||||||
|
"isAnimated": "bool",
|
||||||
|
"keyLabel": "string",
|
||||||
|
"locale": "string",
|
||||||
|
"tooltipThreshold": "number",
|
||||||
|
"topicsOrder": "string",
|
||||||
|
"valueLabel": "string",
|
||||||
|
"xAxisCustomFormat": "string",
|
||||||
|
"xAxisFormat": "string",
|
||||||
|
"xAxisScale": "string",
|
||||||
|
"xAxisValueType":"string",
|
||||||
|
"yTicks": "number",
|
||||||
|
"xTicks": "number",
|
||||||
|
"yAxisBaseline": "string",
|
||||||
|
"useLegend": "bool"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"step": {
|
||||||
|
"description": "Step Chart",
|
||||||
|
"data": true,
|
||||||
|
"props": {
|
||||||
|
"height": "number",
|
||||||
|
"width": "number",
|
||||||
|
"margin": "string",
|
||||||
|
"xAxisLabel": "string",
|
||||||
|
"xAxisLabelOffset": "string",
|
||||||
|
"yAxisLabel": "string",
|
||||||
|
"yAxisLabelOffset": "string",
|
||||||
|
"yTicks": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatterplot": {
|
||||||
|
"description": "Scatterplot Chart",
|
||||||
|
"data": true,
|
||||||
|
"props": {
|
||||||
|
"color": "string",
|
||||||
|
"height": "number",
|
||||||
|
"width": "number",
|
||||||
|
"aspectRatio": "string",
|
||||||
|
"circleOpacity": "string",
|
||||||
|
"grid": "string",
|
||||||
|
"hasCrossHairs": "bool",
|
||||||
|
"isAnimated": "bool",
|
||||||
|
"maxCircleArea": "number",
|
||||||
|
"xAxisLabel": "string",
|
||||||
|
"xAxisLabelOffset": "string",
|
||||||
|
"xTicks": "string",
|
||||||
|
"yAxisFormat": "string",
|
||||||
|
"yAxisLabel": "string",
|
||||||
|
"yAxisLabelOffset": "string",
|
||||||
|
"yTicks": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
"bar": {
|
"bar": {
|
||||||
"description": "Bar Chart",
|
"description": "Bar Chart",
|
||||||
"data": true,
|
"data": true,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<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.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(() => {
|
||||||
|
if (chart) {
|
||||||
|
chartContainer = select(`.${chartClass}`)
|
||||||
|
bindChartUIProps()
|
||||||
|
bindChartEvents()
|
||||||
|
chartContainer.datum(data).call(chart)
|
||||||
|
bindChartTooltip()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: colorSchema = getColorSchema(color)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={chartElement} class={chartClass} />
|
||||||
|
{#if useLegend}
|
||||||
|
<div class={legendClass} />
|
||||||
|
{/if}
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
<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.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(() => {
|
||||||
|
if (chart) {
|
||||||
|
chartContainer = select(`.${chartClass}`)
|
||||||
|
bindChartUIProps()
|
||||||
|
bindChartEvents()
|
||||||
|
chartContainer.datum(data).call(chart)
|
||||||
|
bindChartTooltip()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$: colorSchema = getColorSchema(color)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={chartElement} class={chartClass} />
|
||||||
|
{#if useLegend}
|
||||||
|
<div class={legendClass} />
|
||||||
|
{/if}
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<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}`
|
||||||
|
|
||||||
|
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(() => {
|
||||||
|
if (chart) {
|
||||||
|
chartContainer = select(`.${chartClass}`)
|
||||||
|
bindChartUIProps()
|
||||||
|
bindChartEvents()
|
||||||
|
chartContainer.datum(data).call(chart)
|
||||||
|
// bindChartTooltip()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: colorSchema = getColorSchema(color)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={chartElement} class={chartClass} />
|
||||||
|
{#if useLegend}
|
||||||
|
<div class={legendClass} />
|
||||||
|
{/if}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<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()
|
||||||
|
|
||||||
|
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(() => {
|
||||||
|
if (chart) {
|
||||||
|
chartContainer = select(`.${chartClass}`)
|
||||||
|
bindChartUIProps()
|
||||||
|
bindChartEvents()
|
||||||
|
chartContainer.datum(data).call(chart)
|
||||||
|
bindChartTooltip()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: colorSchema = getColorSchema(color)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={chartElement} class={chartClass} />
|
||||||
|
{#if useLegend}
|
||||||
|
<div class={legendClass} />
|
||||||
|
{/if}
|
||||||
|
|
@ -6,4 +6,8 @@ export { default as bullet } from "./Bullet.svelte"
|
||||||
export { default as groupedbar } from "./GroupedBar.svelte"
|
export { default as groupedbar } from "./GroupedBar.svelte"
|
||||||
export { default as heatmap } from "./Heatmap.svelte"
|
export { default as heatmap } from "./Heatmap.svelte"
|
||||||
export { default as sparkline } from "./Sparkline.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"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue