MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #542 from Budibase/britecharts/separate-components-2 

Completed Charts (Line, Bar, Groupedbar, Donut)
This commit is contained in:
Conor_Mack 2020-08-18 16:03:21 +01:00 committed by GitHub
parent dd64b64ce3 657be43858
commit 8e5d631aa1
16 changed files with 1032 additions and 482 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

545
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -306,7 +306,7 @@ export default {
label: "destinationUrl",
key: "destinationUrl",
control: Input,
placeholder: "/table/{{context._id}}",
placeholder: "/table/_id",
},
],
},
@ -555,102 +555,463 @@ export default {
],
},
{
name: "Donut Chart",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-pie-chart-line",
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
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",
name: "Chart",
description: "Shiny chart",
icon: "ri-bar-chart-fill",
children: [
{
name: "Donut",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-pie-chart-fill",
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
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: "Name Field",
key: "nameKey",
control: Input,
},
{
label: "Value Field",
key: "valueKey",
control: Input,
},
{
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,
},
],
},
{
label: "Name Field",
key: "nameKey",
control: Input,
},
{
name: "Bar",
_component: "@budibase/standard-components/bar",
description: "Bar chart",
icon: "ri-bar-chart-fill",
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Name Label",
key: "nameLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "Y Axis Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Axis Label",
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,
},
],
},
{
label: "Value Field",
key: "valueKey",
control: Input,
},
{
name: "Groupedbar",
_component: "@budibase/standard-components/groupedbar",
description: "Groupedbar chart",
icon: "ri-bar-chart-grouped-fill",
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Color",
key: "color",
control: OptionSelect,
options: [
"britecharts",
"blueGreen",
"green",
"grey",
"orange",
"pink",
"purple",
"red",
"teal",
"yellow",
],
},
{
label: "Height",
key: "height",
control: Input,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Aspect Ratio",
key: "aspectRatio",
control: Input,
},
{
label: "Grid",
key: "grid",
control: OptionSelect,
options: ["vertical", "horizontal", "full"],
},
{
label: "Group Label",
key: "groupLabel",
control: Input,
},
{
label: "Name Label",
key: "nameLabel",
control: Input,
},
{
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,
},
],
},
{
label: "External Radius",
key: "externalRadius",
control: Input,
},
{
name: "Line",
_component: "@budibase/standard-components/line",
description: "Line chart",
icon: "ri-line-chart-fill",
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Colors",
key: "color",
control: OptionSelect,
options: [
"britecharts",
"blueGreen",
"green",
"grey",
"orange",
"pink",
"purple",
"red",
"teal",
"yellow",
],
},
{
label: "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: "Date Label",
key: "dateLabel",
control: Input,
},
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
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: "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,
},
{
label: "Legend Height",
key: "legendHeight",
control: Input,
},
],
},
children: [],
},
],
},
// {
// name: "Data List",

10
packages/builder/src/index.html
View File

@ -8,7 +8,7 @@
<title>Budibase Builder</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
<link rel='icon' type='image/png' href='/_builder/favicon.png'>
<link rel='stylesheet' href='/_builder/global.css'>
<link rel='stylesheet' href='/_builder/codemirror.css'>
@ -18,10 +18,18 @@
<link rel='stylesheet' href='/_builder/bbui.css'>
<link rel='stylesheet' href='/_builder/fonts.css'>
<link rel='stylesheet' href="/_builder/uikit.min.css">
<!-- <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css"
type="text/css"
/> -->
</head>
<body id="app">
<script src='/_builder/bundle.js'></script>
</body>
</html>

17
packages/standard-components/components.json
View File

@ -502,16 +502,12 @@
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
"enableLabels": "bool",
"hasSingleBarHighlight": "bool",
"height": "number",
"width": "number",
"isAnimated": "bool",
"isHorizontal": "bool",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
"nameLabel": "string",
"valueLabel": "string",
@ -546,7 +542,9 @@
"xAxisScale": "string",
"xAxisFormat": "string",
"xAxisCustomFormat": "string",
"xAxisLabel": "string"
"xAxisLabel": "string",
"yAxisLabel": "string",
"tooltipTitle": "string"
}
},
"brush":{
@ -567,7 +565,7 @@
}
},
"heatmap": {
"description": "Groupedbar chart",
"description": "Heatmap chart",
"data": true,
"props": {
"model": "string",
@ -587,8 +585,7 @@
"color": "string",
"height": "string",
"width": "string",
"margin": "string",
"aspectRatio": "number",
"margin":"string",
"grid":"string",
"groupLabel": "string",
"isAnimated": "bool",
@ -596,8 +593,8 @@
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"yTickTextOffset": "string",
"useLegend": "bool"
"useLegend": "bool",
"tooltipTitle": "string"
}
},
"bullet": {

198
packages/standard-components/dist/generators.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/standard-components/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
packages/standard-components/package.json
View File

@ -20,6 +20,7 @@
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-livereload": "^1.0.1",
"rollup-plugin-node-resolve": "^5.0.0",
"rollup-plugin-postcss": "^3.1.5",
"rollup-plugin-svelte": "^5.0.0",
"rollup-plugin-terser": "^5.1.1",
"shortid": "^2.2.15",
@ -34,8 +35,8 @@
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": {
"@beyonk/svelte-googlemaps": "^2.2.0",
"britecharts": "^2.16.0",
"d3-selection": "^1.4.1",
"britecharts": "^2.16.1",
"d3-selection": "^1.4.2",
"fast-sort": "^2.2.0",
"fusioncharts": "^3.15.1-sr.1",
"svelte-fusioncharts": "^1.0.0"

6
packages/standard-components/rollup.config.js
View File

@ -1,6 +1,7 @@
import svelte from "rollup-plugin-svelte"
import resolve from "rollup-plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import postcss from "rollup-plugin-postcss"
export default {
input: "src/index.js",
@ -9,10 +10,13 @@ export default {
file: "dist/index.js",
format: "esm",
name: "budibaseStandardComponents",
sourcemap: "inline",
sourcemap: true,
},
],
plugins: [
postcss({
plugins: [],
}),
svelte({
hydratable: true,
}),

113
packages/standard-components/src/Chart/Bar.svelte
View File

@ -1,23 +1,20 @@
<script>
import { getColorSchema, getChartGradient } from "./Chart.svelte"
import {
getColorSchema,
getChartGradient,
notNull,
hasProp,
} from "./utils.js"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
/*
ISSUES:
- x and y axis label set and appear in the dom but do not display next to the axis
- x and y axis label offset - does effect position of labels but does not render text (see above)
- x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
specifically and doing this: <tspan x="-10" dy="0.32em">4.0</tspan>
*/
let tooltip
const _id = shortid.generate()
const chart = britecharts.bar()
const chartClass = `bar-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
@ -29,13 +26,13 @@
export let customMouseOut = () => tooltip.hide()
export let customClick = null
export let data = []
let data = []
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 = true
export let enableLabels = false
export let hasPercentage = null
export let hasSingleBarHighlight = true
export let highlightBarFunction = null
@ -64,18 +61,25 @@
let store = _bb.store
onMount(async () => {
if (chartElement) {
if (model) {
await fetchData()
if (model) {
await fetchData()
data = $store[model]
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")
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
const schemaIsValid = () =>
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
(hasProp(data, "value") || hasProp(data, valueLabel))
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -91,85 +95,85 @@
}
function bindChartUIProps() {
chart.numberFormat(".1f")
chart.numberFormat(".0f")
chart.labelsNumberFormat(".1f")
if (color) {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (gradient) {
if (notNull(gradient)) {
chart.chartGradient(chartGradient)
}
if (xAxisLabel) {
if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel)
}
if (yAxisLabel) {
if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel)
}
if (betweenBarsPadding) {
if (notNull(betweenBarsPadding)) {
chart.betweenBarsPadding(Number(betweenBarsPadding))
}
if (enableLabels) {
if (notNull(enableLabels)) {
chart.enableLabels(enableLabels)
}
if (hasPercentage) {
if (notNull(hasPercentage)) {
chart.hasPercentage(hasPercentage)
}
if (hasSingleBarHighlight) {
if (notNull(hasSingleBarHighlight)) {
chart.hasSingleBarHighlight(hasSingleBarHighlight)
}
if (labelsMargin) {
if (notNull(labelsMargin)) {
chart.labelsMargin(labelsMargin)
}
if (height) {
if (notNull(height)) {
chart.height(height)
}
if (highlightBarFunction) {
if (notNull(highlightBarFunction)) {
chart.highlightBarFunction(highlightBarFunction)
}
if (width) {
if (notNull(width)) {
chart.width(width)
}
if (isAnimated) {
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (isHorizontal) {
if (notNull(isHorizontal)) {
chart.isHorizontal(isHorizontal)
}
if (yAxisLabelOffset) {
if (notNull(yAxisLabelOffset)) {
chart.yAxisLabelOffset(yAxisLabelOffset)
}
if (xAxisLabelOffset) {
if (notNull(xAxisLabelOffset)) {
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
}
if (labelsNumberFormat) {
if (notNull(labelsNumberFormat)) {
chart.labelsNumberFormat(labelsNumberFormat)
}
if (valueLabel) {
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (locale) {
if (notNull(locale)) {
chart.locale(locale)
}
if (nameLabel) {
if (notNull(nameLabel)) {
chart.nameLabel(nameLabel)
}
if (numberFormat) {
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (labelsSize) {
if (notNull(labelsSize)) {
chart.labelsSize(labelsSize)
}
if (xTicks) {
if (notNull(xTicks)) {
chart.xTicks(xTicks)
}
if (yTicks) {
if (notNull(yTicks)) {
chart.yTicks(yTicks)
}
if (percentageAxisToMaxRatio) {
if (notNull(percentageAxisToMaxRatio)) {
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
}
chartContainer.datum(_data).call(chart)
chartContainer.datum(data).call(chart)
}
function bindChartEvents() {
@ -194,25 +198,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(gradient)
</script>
<!-- SVG Test
<svg viewBox="6 -8 200 22">
<text x="5" y="10" class="text-svg">Hello World</text>
</svg>-->
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<style>
.text-svg {
font: italic 15px serif;
fill: red;
}
</style>

90
packages/standard-components/src/Chart/GroupedBar.svelte
View File

@ -1,13 +1,8 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
/*
ISSUES
- Renders but seems to be a problem with tooltip hover
*/
import { select } from "d3-selection"
import shortid from "shortid"
@ -22,22 +17,18 @@
const chartClass = `groupedbar-container-${_id}`
const legendClass = `legend-container-${_id}`
let tooltip
let tooltip = britecharts.tooltip()
let tooltipContainer
let chartElement = null
let chartContainer = null
export let customMouseOver = () => tooltip.show()
export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) =>
tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
export let customMouseOut = () => tooltip.hide()
export let customClick = null
export let data = []
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 margin = null
export let aspectRatio = null
export let grid = null
export let groupLabel = null
@ -51,18 +42,33 @@
export let yAxisLabelOffset = null
export let yTicks = null
export let yTickTextOffset = null
export let useLegend = true
export let tooltipTitle = ""
$: console.log("DATA", data)
let chartDrawn = false
const schemaIsValid = () =>
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
(hasProp(data, "group") || hasProp(data, groupLabel)) &&
(hasProp(data, "value") || hasProp(data, valueLabel))
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
if (model) {
await fetchData()
data = $store[model]
if (schemaIsValid()) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindTooltip()
chartDrawn = true
} else {
console.error(
"Grouped bar - Please provide valid name, value and group labels"
)
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
// bindChartEvents()
chartContainer.datum(data).call(chart)
// bindChartTooltip()
}
})
@ -80,6 +86,13 @@
}
}
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)
@ -90,6 +103,9 @@
if (notNull(width)) {
chart.width(width)
}
if (notNull(margin)) {
chart.margin(margin)
}
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
@ -129,35 +145,23 @@
if (notNull(yTickTextOffset)) {
chart.yTickTextOffset(yTickTextOffset)
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
tooltip.title(tooltipTitle || "Groupedbar Title")
debugger
}
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)
}
chart.on("customMouseMove", tooltip.update)
chart.on("customMouseOut", tooltip.hide)
chart.on("customMouseOver", tooltip.show)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<!-- {#if chartDrawn}
<Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
{/if} -->

6
packages/standard-components/src/Chart/Legend.svelte
View File

@ -70,6 +70,7 @@
if (notNull(unit)) {
legend.unit(unit)
}
legendContainer.datum(data).call(legend)
}
}
@ -78,5 +79,8 @@
</script>
{#if useLegend}
<div bind:this={legendElement} class={legendClass} />
<div
bind:this={legendElement}
style={`width: ${width}px`}
class={legendClass} />
{/if}

179
packages/standard-components/src/Chart/Line.svelte
View File

@ -1,5 +1,5 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
@ -15,33 +15,43 @@
const chart = britecharts.line()
const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}`
let data = { dataByTopic: [] }
let chartElement
let chartContainer
let tooltip
let tooltipContainer
export let customMouseHover = null
export let customMouseMove = null
export let customMouseOut = null
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 data = []
export let color = "britecharts"
export let axisTimeCombinations = ""
export let grid = "horizontal"
export let aspectRatio = 0.5
export let dateLabel = "date"
export let width = null
export let height = null
export let isAnimated = true
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"
@ -49,24 +59,39 @@
export let xAxisFormat = "day-month"
export let xAxisCustomFormat = "%H"
export let yAxisLabel = null
export let useLegend = true
export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop
export let tooltipThreshold = null
export let tooltipTitle = ""
let chartDrawn = false
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
if (model) {
data = await getAndPrepareData()
if (data.dataByTopic.length > 0) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
chartDrawn = true
bindTooltip()
} else {
console.error(
"Line Chart - Please provide valid name, value and topic labels"
)
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
function bindTooltip() {
tooltipContainer = select(
`.${chartClass} .metadata-group .vertical-marker-container`
)
tooltip.topicLabel("topics")
tooltipContainer.datum([]).call(tooltip)
}
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -81,10 +106,66 @@
}
}
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"
}
await fetchData()
_data = $store[model]
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.grid("horizontal")
chart.isAnimated(true)
chart.tooltipThreshold(800)
chart.aspectRatio(0.5)
chart.xAxisCustomFormat("custom")
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(lineGradient)) {
chart.lineGradient(chartGradient)
}
if (notNull(axisTimeCombinations)) {
chart.axisTimeCombinations(axisTimeCombinations)
}
@ -94,9 +175,6 @@
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
if (notNull(dateLabel)) {
chart.dateLabel(dateLabel)
}
if (notNull(width)) {
chart.width(width)
}
@ -118,12 +196,6 @@
if (notNull(shouldShowAllDataPoints)) {
chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
}
if (notNull(topicLabel)) {
chart.topicLabel(topicLabel)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel)
}
@ -145,17 +217,25 @@
if (notNull(yAxisLabelPadding)) {
chart.yAxisLabelPadding(yAxisLabelPadding)
}
if (notNull(tooltipThreshold)) {
chart.tooltipThreshold(tooltipThreshold)
}
if (notNull(lines)) {
chart.lines(lines)
}
tooltip.title(tooltipTitle || "Line Tooltip")
}
function bindChartEvents() {
if (customMouseHover) {
chart.on("customMouseHover", customMouseHover)
if (customMouseOver) {
chart.on("customMouseOver", tooltip.show)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
chart.on("customMouseMove", tooltip.update)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
chart.on("customMouseOut", tooltip.hide)
}
if (customDataEntryClick) {
chart.on("customDataEntryClick", customDataEntryClick)
@ -165,45 +245,8 @@
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(lineGradient)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<!--
isAnimated={true}
aspectRatio={0.5}
grid='horizontal'
tooltipThreshold={600}
width={600}
dateLabel='fullDate'
{type}
{data}
{colorSchema}
{axisTimeCombinations}
{lineCurve}
{numberFormat}
{height}
{topicLabel}
{shouldShowAllDataPoints}
{xAxisLabel}
{valueLabel}
{xAxisValueType}
{xAxisScale}
{xAxisCustomFormat}
-->

81
packages/standard-components/src/Chart/Tooltip.svelte Normal file
View File

@ -0,0 +1,81 @@
<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
packages/standard-components/src/Chart/index.js
View File

@ -1,3 +1,4 @@
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"

4
packages/standard-components/src/Chart/tests/bar.html
View File

@ -6,8 +6,8 @@
<title>Document</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/bar.min.js"
type="text/javascript"></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" />

235
packages/standard-components/src/Chart/tests/line.html Normal file
View File

@ -0,0 +1,235 @@
<!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,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "ceb87054790f480e80512368545755bb",
_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
},
{
amount: 12,
audited: new Date("2020-01-03T16:00:00-08:00"),
city: "Belfast",
name: 1,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "0a36103b55124f348a23d10b2f3ed0e3",
_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
},
{
amount: 6,
audited: new Date("2020-01-04T16:00:00-08:00"),
city: "Belfast",
name: 1,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "68ade2bb94754caa8fc62c7084e3cef7",
_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
},
{
amount: 2,
audited: new Date("2020-01-01T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "2ab6dabf833f4d99b3438fa4353ba429",
_rev: "2-45b190489e76842981902cc9f04369ec",
},
{
amount: 16,
audited: new Date("2020-01-02T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "1b2ca36db1724427a98ba95547f946e0",
_rev: "2-c43def17ada959948b9af5484ad5b6b7",
},
{
amount: 7,
audited: new Date("2020-01-03T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "d9235d884a224ca68ac30cefdbb8ae53",
_rev: "2-695e426a261a25474cbf6b1f069dccb4",
},
{
amount: 3,
audited: new Date("2020-01-04T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "9f8bc39a9cfb4f779da8c998d7622927",
_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
},
{
amount: 4,
audited: new Date("2020-01-02T16:00:00-08:00"),
city: "London",
name: 3,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "75274e906073493bbf75cda8656e8db0",
_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
},
{
amount: 22,
audited: new Date("2020-01-06T16:00:00-08:00"),
city: "London",
name: 3,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "da3d4b151bc641f4ace487a2314d2550",
_rev: "2-ac18490eaa016be0e71bd4c4ea332981",
}
]
}
const topicLabel = "city"
const valueLabel = "amount"
const dateLabel = "audited"
function prepareData() {
let dataByTopic = []
testData.data.forEach((data, idx, arr) => {
let topicName = data[topicLabel]
if(!dataByTopic.some(dt => dt.topicName === topicName)) {
let d = {topicName, topic: dataByTopic.length + 1, dates: arr.filter(d => d[topicLabel] === topicName).map(d => ({date: d[dateLabel], value: d[valueLabel]}))}
dataByTopic.push(d)
}
})
return {dataByTopic}
}
const newData = prepareData()
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>

22
packages/standard-components/src/Chart/utils.js
View File

@ -2,6 +2,8 @@ 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
@ -17,3 +19,23 @@ export const getColorSchema = color =>
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 clonedRecord = { ...d }
if (clonedRecord[formatKey]) {
delete clonedRecord[formatKey]
}
let value = clonedRecord[dataKey]
if (!ignoreList.includes(dataKey)) {
delete clonedRecord[dataKey]
}
clonedRecord[formatKey] = value
return clonedRecord
})
} else {
return data
}
}