CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
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 27c1b38ebc 1156952b73
commit 80a3b83e2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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
}
}