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

Merge branch 'master' of github.com:Budibase/budibase into master

This commit is contained in:
Michael Shanks 2020-08-18 21:00:09 +01:00
parent f2036a98f5 8e5d631aa1
commit b589d3c3ed
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", label: "destinationUrl",
key: "destinationUrl", key: "destinationUrl",
control: Input, control: Input,
placeholder: "/table/{{context._id}}", placeholder: "/table/_id",
}, },
], ],
}, },
@ -555,102 +555,463 @@ export default {
], ],
}, },
{ {
name: "Donut Chart", name: "Chart",
_component: "@budibase/standard-components/donut", description: "Shiny chart",
description: "Donut chart", icon: "ri-bar-chart-fill",
icon: "ri-pie-chart-line", children: [
properties: { {
settings: [ name: "Donut",
{ _component: "@budibase/standard-components/donut",
label: "Table", description: "Donut chart",
key: "model", icon: "ri-pie-chart-fill",
control: ModelSelect, properties: {
}, settings: [
{ {
label: "Animate Chart", label: "Table",
key: "isAnimated", key: "model",
valueKey: "checked", control: ModelSelect,
control: Checkbox, },
}, {
{ label: "Animate Chart",
label: "Hover Highlight", key: "isAnimated",
key: "hasHoverAnimation", valueKey: "checked",
valueKey: "checked", control: Checkbox,
control: Checkbox, },
}, {
{ label: "Hover Highlight",
label: "Keep Last Hover", key: "hasHoverAnimation",
key: "hasLastHoverSliceHighlighted", valueKey: "checked",
valueKey: "checked", control: Checkbox,
control: Checkbox, },
}, {
{ label: "Keep Last Hover",
label: "Colors", key: "hasLastHoverSliceHighlighted",
key: "color", valueKey: "checked",
control: OptionSelect, control: Checkbox,
options: [ },
"britecharts", {
"blueGreen", label: "Colors",
"green", key: "color",
"grey", control: OptionSelect,
"orange", options: [
"pink", "britecharts",
"purple", "blueGreen",
"red", "green",
"teal", "grey",
"yellow", "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", name: "Bar",
control: Input, _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", name: "Groupedbar",
control: Input, _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", name: "Line",
control: Input, _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", // name: "Data List",

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

@ -18,10 +18,18 @@
<link rel='stylesheet' href='/_builder/bbui.css'> <link rel='stylesheet' href='/_builder/bbui.css'>
<link rel='stylesheet' href='/_builder/fonts.css'> <link rel='stylesheet' href='/_builder/fonts.css'>
<link rel='stylesheet' href="/_builder/uikit.min.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> </head>
<body id="app"> <body id="app">
<script src='/_builder/bundle.js'></script> <script src='/_builder/bundle.js'></script>
</body> </body>
</html> </html>

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

@ -502,16 +502,12 @@
"betweenBarsPadding": "number", "betweenBarsPadding": "number",
"gradient": "string", "gradient": "string",
"color": "string", "color": "string",
"enableLabels": "bool",
"hasSingleBarHighlight": "bool", "hasSingleBarHighlight": "bool",
"height": "number", "height": "number",
"width": "number", "width": "number",
"isAnimated": "bool", "isAnimated": "bool",
"isHorizontal": "bool", "isHorizontal": "bool",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number", "labelNumberFormat": "number",
"labelSize": "number",
"locale": "string", "locale": "string",
"nameLabel": "string", "nameLabel": "string",
"valueLabel": "string", "valueLabel": "string",
@ -546,7 +542,9 @@
"xAxisScale": "string", "xAxisScale": "string",
"xAxisFormat": "string", "xAxisFormat": "string",
"xAxisCustomFormat": "string", "xAxisCustomFormat": "string",
"xAxisLabel": "string" "xAxisLabel": "string",
"yAxisLabel": "string",
"tooltipTitle": "string"
} }
}, },
"brush":{ "brush":{
@ -567,7 +565,7 @@
} }
}, },
"heatmap": { "heatmap": {
"description": "Groupedbar chart", "description": "Heatmap chart",
"data": true, "data": true,
"props": { "props": {
"model": "string", "model": "string",
@ -587,8 +585,7 @@
"color": "string", "color": "string",
"height": "string", "height": "string",
"width": "string", "width": "string",
"margin": "string", "margin":"string",
"aspectRatio": "number",
"grid":"string", "grid":"string",
"groupLabel": "string", "groupLabel": "string",
"isAnimated": "bool", "isAnimated": "bool",
@ -596,8 +593,8 @@
"nameLabel": "string", "nameLabel": "string",
"valueLabel":"string", "valueLabel":"string",
"yTicks": "string", "yTicks": "string",
"yTickTextOffset": "string", "useLegend": "bool",
"useLegend": "bool" "tooltipTitle": "string"
} }
}, },
"bullet": { "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-json": "^4.0.0",
"rollup-plugin-livereload": "^1.0.1", "rollup-plugin-livereload": "^1.0.1",
"rollup-plugin-node-resolve": "^5.0.0", "rollup-plugin-node-resolve": "^5.0.0",
"rollup-plugin-postcss": "^3.1.5",
"rollup-plugin-svelte": "^5.0.0", "rollup-plugin-svelte": "^5.0.0",
"rollup-plugin-terser": "^5.1.1", "rollup-plugin-terser": "^5.1.1",
"shortid": "^2.2.15", "shortid": "^2.2.15",
@ -34,8 +35,8 @@
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691", "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": { "dependencies": {
"@beyonk/svelte-googlemaps": "^2.2.0", "@beyonk/svelte-googlemaps": "^2.2.0",
"britecharts": "^2.16.0", "britecharts": "^2.16.1",
"d3-selection": "^1.4.1", "d3-selection": "^1.4.2",
"fast-sort": "^2.2.0", "fast-sort": "^2.2.0",
"fusioncharts": "^3.15.1-sr.1", "fusioncharts": "^3.15.1-sr.1",
"svelte-fusioncharts": "^1.0.0" "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 svelte from "rollup-plugin-svelte"
import resolve from "rollup-plugin-node-resolve" import resolve from "rollup-plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs" import commonjs from "@rollup/plugin-commonjs"
import postcss from "rollup-plugin-postcss"
export default { export default {
input: "src/index.js", input: "src/index.js",
@ -9,10 +10,13 @@ export default {
file: "dist/index.js", file: "dist/index.js",
format: "esm", format: "esm",
name: "budibaseStandardComponents", name: "budibaseStandardComponents",
sourcemap: "inline", sourcemap: true,
}, },
], ],
plugins: [ plugins: [
postcss({
plugins: [],
}),
svelte({ svelte({
hydratable: true, hydratable: true,
}), }),

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

@ -1,23 +1,20 @@
<script> <script>
import { getColorSchema, getChartGradient } from "./Chart.svelte" import {
getColorSchema,
getChartGradient,
notNull,
hasProp,
} from "./utils.js"
import britecharts from "britecharts" import britecharts from "britecharts"
import { onMount } from "svelte" import { onMount } from "svelte"
import { select } from "d3-selection" import { select } from "d3-selection"
import shortid from "shortid" 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 let tooltip
const _id = shortid.generate() const _id = shortid.generate()
const chart = britecharts.bar() const chart = britecharts.bar()
const chartClass = `bar-container-${_id}` const chartClass = `bar-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null let chartElement = null
let chartContainer = null let chartContainer = null
@ -29,13 +26,13 @@
export let customMouseOut = () => tooltip.hide() export let customMouseOut = () => tooltip.hide()
export let customClick = null export let customClick = null
export let data = [] let data = []
export let xAxisLabel = "" export let xAxisLabel = ""
export let yAxisLabel = "" export let yAxisLabel = ""
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
export let gradient = null export let gradient = null
export let color = "britecharts" export let color = "britecharts"
export let enableLabels = true export let enableLabels = false
export let hasPercentage = null export let hasPercentage = null
export let hasSingleBarHighlight = true export let hasSingleBarHighlight = true
export let highlightBarFunction = null export let highlightBarFunction = null
@ -64,18 +61,25 @@
let store = _bb.store let store = _bb.store
onMount(async () => { onMount(async () => {
if (chartElement) { if (model) {
if (model) { await fetchData()
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() { async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}` const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL) const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -91,85 +95,85 @@
} }
function bindChartUIProps() { function bindChartUIProps() {
chart.numberFormat(".1f") chart.numberFormat(".0f")
chart.labelsNumberFormat(".1f") chart.labelsNumberFormat(".1f")
if (color) { if (notNull(color)) {
chart.colorSchema(colorSchema) chart.colorSchema(colorSchema)
} }
if (gradient) { if (notNull(gradient)) {
chart.chartGradient(chartGradient) chart.chartGradient(chartGradient)
} }
if (xAxisLabel) { if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel) chart.xAxisLabel(xAxisLabel)
} }
if (yAxisLabel) { if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel) chart.yAxisLabel(yAxisLabel)
} }
if (betweenBarsPadding) { if (notNull(betweenBarsPadding)) {
chart.betweenBarsPadding(Number(betweenBarsPadding)) chart.betweenBarsPadding(Number(betweenBarsPadding))
} }
if (enableLabels) { if (notNull(enableLabels)) {
chart.enableLabels(enableLabels) chart.enableLabels(enableLabels)
} }
if (hasPercentage) { if (notNull(hasPercentage)) {
chart.hasPercentage(hasPercentage) chart.hasPercentage(hasPercentage)
} }
if (hasSingleBarHighlight) { if (notNull(hasSingleBarHighlight)) {
chart.hasSingleBarHighlight(hasSingleBarHighlight) chart.hasSingleBarHighlight(hasSingleBarHighlight)
} }
if (labelsMargin) { if (notNull(labelsMargin)) {
chart.labelsMargin(labelsMargin) chart.labelsMargin(labelsMargin)
} }
if (height) { if (notNull(height)) {
chart.height(height) chart.height(height)
} }
if (highlightBarFunction) { if (notNull(highlightBarFunction)) {
chart.highlightBarFunction(highlightBarFunction) chart.highlightBarFunction(highlightBarFunction)
} }
if (width) { if (notNull(width)) {
chart.width(width) chart.width(width)
} }
if (isAnimated) { if (notNull(isAnimated)) {
chart.isAnimated(isAnimated) chart.isAnimated(isAnimated)
} }
if (isHorizontal) { if (notNull(isHorizontal)) {
chart.isHorizontal(isHorizontal) chart.isHorizontal(isHorizontal)
} }
if (yAxisLabelOffset) { if (notNull(yAxisLabelOffset)) {
chart.yAxisLabelOffset(yAxisLabelOffset) chart.yAxisLabelOffset(yAxisLabelOffset)
} }
if (xAxisLabelOffset) { if (notNull(xAxisLabelOffset)) {
chart.xAxisLabelOffset(Number(xAxisLabelOffset)) chart.xAxisLabelOffset(Number(xAxisLabelOffset))
} }
if (labelsNumberFormat) { if (notNull(labelsNumberFormat)) {
chart.labelsNumberFormat(labelsNumberFormat) chart.labelsNumberFormat(labelsNumberFormat)
} }
if (valueLabel) { if (notNull(valueLabel)) {
chart.valueLabel(valueLabel) chart.valueLabel(valueLabel)
} }
if (locale) { if (notNull(locale)) {
chart.locale(locale) chart.locale(locale)
} }
if (nameLabel) { if (notNull(nameLabel)) {
chart.nameLabel(nameLabel) chart.nameLabel(nameLabel)
} }
if (numberFormat) { if (notNull(numberFormat)) {
chart.numberFormat(numberFormat) chart.numberFormat(numberFormat)
} }
if (labelsSize) { if (notNull(labelsSize)) {
chart.labelsSize(labelsSize) chart.labelsSize(labelsSize)
} }
if (xTicks) { if (notNull(xTicks)) {
chart.xTicks(xTicks) chart.xTicks(xTicks)
} }
if (yTicks) { if (notNull(yTicks)) {
chart.yTicks(yTicks) chart.yTicks(yTicks)
} }
if (percentageAxisToMaxRatio) { if (notNull(percentageAxisToMaxRatio)) {
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio) chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
} }
chartContainer.datum(_data).call(chart) chartContainer.datum(data).call(chart)
} }
function bindChartEvents() { function bindChartEvents() {
@ -194,25 +198,8 @@
tooltipContainer.datum([]).call(tooltip) tooltipContainer.datum([]).call(tooltip)
} }
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color) $: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(gradient) $: chartGradient = getChartGradient(gradient)
</script> </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} /> <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> <script>
import { getColorSchema, getChartGradient, notNull } from "./utils" import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts" import britecharts from "britecharts"
import { onMount } from "svelte" import { onMount } from "svelte"
/*
ISSUES
- Renders but seems to be a problem with tooltip hover
*/
import { select } from "d3-selection" import { select } from "d3-selection"
import shortid from "shortid" import shortid from "shortid"
@ -22,22 +17,18 @@
const chartClass = `groupedbar-container-${_id}` const chartClass = `groupedbar-container-${_id}`
const legendClass = `legend-container-${_id}` const legendClass = `legend-container-${_id}`
let tooltip let tooltip = britecharts.tooltip()
let tooltipContainer let tooltipContainer
let chartElement = null let chartElement = null
let chartContainer = 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 customClick = null
export let data = [] let data = []
export let color = "britecharts" export let color = "britecharts"
export let height = 200 export let height = 200
export let width = 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 aspectRatio = null
export let grid = null export let grid = null
export let groupLabel = null export let groupLabel = null
@ -51,18 +42,33 @@
export let yAxisLabelOffset = null export let yAxisLabelOffset = null
export let yTicks = null export let yTicks = null
export let yTickTextOffset = 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 () => { onMount(async () => {
if (chart) { if (model) {
if (model) { await fetchData()
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() { function bindChartUIProps() {
if (notNull(color)) { if (notNull(color)) {
chart.colorSchema(colorSchema) chart.colorSchema(colorSchema)
@ -90,6 +103,9 @@
if (notNull(width)) { if (notNull(width)) {
chart.width(width) chart.width(width)
} }
if (notNull(margin)) {
chart.margin(margin)
}
if (notNull(aspectRatio)) { if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio) chart.aspectRatio(aspectRatio)
} }
@ -129,35 +145,23 @@
if (notNull(yTickTextOffset)) { if (notNull(yTickTextOffset)) {
chart.yTickTextOffset(yTickTextOffset) chart.yTickTextOffset(yTickTextOffset)
} }
} tooltip.title(tooltipTitle || "Groupedbar Title")
debugger
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
} }
function bindChartEvents() { function bindChartEvents() {
if (customClick) { if (customClick) {
chart.on("customClick", customClick) chart.on("customClick", customClick)
} }
if (customMouseMove) { chart.on("customMouseMove", tooltip.update)
chart.on("customMouseMove", customMouseMove) chart.on("customMouseOut", tooltip.hide)
} chart.on("customMouseOver", tooltip.show)
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
}
} }
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color) $: colorSchema = getColorSchema(color)
</script> </script>
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
{#if useLegend} <!-- {#if chartDrawn}
<div class={legendClass} /> <Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
{/if} {/if} -->

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

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

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

@ -1,5 +1,5 @@
<script> <script>
import { getColorSchema, getChartGradient, notNull } from "./utils" import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import britecharts from "britecharts" import britecharts from "britecharts"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -15,33 +15,43 @@
const chart = britecharts.line() const chart = britecharts.line()
const chartClass = `line-container-${_id}` const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}`
let data = { dataByTopic: [] }
let chartElement let chartElement
let chartContainer let chartContainer
let tooltip
let tooltipContainer let tooltipContainer
export let customMouseHover = null let tooltip = britecharts.tooltip()
export let customMouseMove = null
export let customMouseOut = null 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 customDataEntryClick = null
export let customTouchMove = null export let customTouchMove = null
export let data = []
export let color = "britecharts" export let color = "britecharts"
export let axisTimeCombinations = "" export let axisTimeCombinations = ""
export let grid = "horizontal" export let grid = "horizontal"
export let aspectRatio = 0.5 export let aspectRatio = 0.5
export let dateLabel = "date"
export let width = null export let width = null
export let height = null export let height = null
export let isAnimated = true export let isAnimated = true
export let lineCurve = "linear" //see api for possible opts export let lineCurve = "linear" //see api for possible opts
export let lineGradient = null
export let locale = "en-GB" export let locale = "en-GB"
export let numberFormat = "" export let numberFormat = ""
export let shouldShowAllDataPoints = true export let shouldShowAllDataPoints = true
export let topicLabel = null export let topicLabel = null
export let dateLabel = "date"
export let valueLabel = null export let valueLabel = null
export let xAxisLabel = "" export let xAxisLabel = ""
export let xAxisValueType = "date" export let xAxisValueType = "date"
@ -49,24 +59,39 @@
export let xAxisFormat = "day-month" export let xAxisFormat = "day-month"
export let xAxisCustomFormat = "%H" export let xAxisCustomFormat = "%H"
export let yAxisLabel = null export let yAxisLabel = null
export let useLegend = true
export let yAxisLabelPadding = null export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop export let lines = null //not handled by setting prop
export let tooltipThreshold = null export let tooltipThreshold = null
export let tooltipTitle = ""
let chartDrawn = false
onMount(async () => { onMount(async () => {
if (chart) { if (model) {
if (model) { data = await getAndPrepareData()
await fetchData() 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() { async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}` const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL) 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() { function bindChartUIProps() {
chart.grid("horizontal")
chart.isAnimated(true)
chart.tooltipThreshold(800)
chart.aspectRatio(0.5)
chart.xAxisCustomFormat("custom")
if (notNull(color)) { if (notNull(color)) {
chart.colorSchema(colorSchema) chart.colorSchema(colorSchema)
} }
if (notNull(lineGradient)) {
chart.lineGradient(chartGradient)
}
if (notNull(axisTimeCombinations)) { if (notNull(axisTimeCombinations)) {
chart.axisTimeCombinations(axisTimeCombinations) chart.axisTimeCombinations(axisTimeCombinations)
} }
@ -94,9 +175,6 @@
if (notNull(aspectRatio)) { if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio) chart.aspectRatio(aspectRatio)
} }
if (notNull(dateLabel)) {
chart.dateLabel(dateLabel)
}
if (notNull(width)) { if (notNull(width)) {
chart.width(width) chart.width(width)
} }
@ -118,12 +196,6 @@
if (notNull(shouldShowAllDataPoints)) { if (notNull(shouldShowAllDataPoints)) {
chart.shouldShowAllDataPoints(shouldShowAllDataPoints) chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
} }
if (notNull(topicLabel)) {
chart.topicLabel(topicLabel)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (notNull(xAxisLabel)) { if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel) chart.xAxisLabel(xAxisLabel)
} }
@ -145,17 +217,25 @@
if (notNull(yAxisLabelPadding)) { if (notNull(yAxisLabelPadding)) {
chart.yAxisLabelPadding(yAxisLabelPadding) chart.yAxisLabelPadding(yAxisLabelPadding)
} }
if (notNull(tooltipThreshold)) {
chart.tooltipThreshold(tooltipThreshold)
}
if (notNull(lines)) {
chart.lines(lines)
}
tooltip.title(tooltipTitle || "Line Tooltip")
} }
function bindChartEvents() { function bindChartEvents() {
if (customMouseHover) { if (customMouseOver) {
chart.on("customMouseHover", customMouseHover) chart.on("customMouseOver", tooltip.show)
} }
if (customMouseMove) { if (customMouseMove) {
chart.on("customMouseMove", customMouseMove) chart.on("customMouseMove", tooltip.update)
} }
if (customMouseOut) { if (customMouseOut) {
chart.on("customMouseOut", customMouseOut) chart.on("customMouseOut", tooltip.hide)
} }
if (customDataEntryClick) { if (customDataEntryClick) {
chart.on("customDataEntryClick", 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) $: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(lineGradient)
</script> </script>
<div bind:this={chartElement} class={chartClass} /> <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 donut } from "./Donut.svelte"
export { default as bar } from "./Bar.svelte" export { default as bar } from "./Bar.svelte"
export { default as line } from "./Line.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> <title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script> <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" /> <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 notNull = value => value || value === false
export const hasProp = (data, prop) => data.every(d => prop in d)
export const chartTypes = britecharts ? Object.keys(britecharts) : null export const chartTypes = britecharts ? Object.keys(britecharts) : null
//expose chart color schemas for use or reference outside compnent //expose chart color schemas for use or reference outside compnent
@ -17,3 +19,23 @@ export const getColorSchema = color =>
export const getChartGradient = gradient => export const getChartGradient = gradient =>
gradient ? colorGradients[gradient] : null 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
}
}