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",
|
||||
_component: "@budibase/standard-components/sparkline",
|
||||
|
|
@ -742,6 +1052,7 @@ export default {
|
|||
{
|
||||
label: "Use Legend",
|
||||
key: "useLegend",
|
||||
keyValue: "checked",
|
||||
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",
|
||||
_component: "@budibase/standard-components/line",
|
||||
|
|
|
|||
|
|
@ -286,6 +286,103 @@
|
|||
"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": {
|
||||
"description": "Bar Chart",
|
||||
"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}
|
||||
152
packages/standard-components/src/Chart/StackedBar.svelte
Normal file
152
packages/standard-components/src/Chart/StackedBar.svelte
Normal file
|
|
@ -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 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"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue