From 8c1d7bc971840eda4e9aad5136d15b28d362e50c Mon Sep 17 00:00:00 2001 From: cmack Date: Wed, 5 Aug 2020 16:57:54 +0100 Subject: [PATCH] Latest Donut and Legend Updates --- .../src/components/common/Checkbox.svelte | 2 +- .../userInterface/temporaryPanelStructure.js | 32 ++++-- packages/standard-components/components.json | 5 +- .../src/Chart/Donut.svelte | 42 +++++-- .../src/Chart/Legend.svelte | 105 ++++++++---------- 5 files changed, 106 insertions(+), 80 deletions(-) diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte index fe3f5756eb..ebd2df2a0c 100644 --- a/packages/builder/src/components/common/Checkbox.svelte +++ b/packages/builder/src/components/common/Checkbox.svelte @@ -27,7 +27,7 @@ height: 20px; /* background-color: #5e17e9; */ background-color: var(--grey-2); - transform: translateY(-50%); + /* transform: translateY(-50%); */ cursor: pointer; transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow; diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index dc05f1dab2..4d40fe8144 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -498,13 +498,7 @@ export default { control: ModelSelect, }, { - label: "Fix Highlight Slice", - key: "hasFixedHighlightedSlice", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Hover highlight", + label: "Keep Last Hover", key: "hasLastHoverSliceHighlighted", valueKey: "checked", control: Checkbox, @@ -516,7 +510,7 @@ export default { control: Checkbox, }, { - label: "Has Hover", + label: "Hover Highlight", key: "hasHoverAnimation", valueKey: "checked", control: Checkbox, @@ -559,6 +553,28 @@ export default { valueKey: "checked", control: Checkbox, }, + { + 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, + }, ], }, }, diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 9016413cbe..c7a668cc62 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -291,8 +291,11 @@ "externalRadius": "number", "internalRadius": "number", "radiusHoverOffset": "number", + "percentageFormat": "string", "useLegend": "bool", - "percentageFormat": "string" + "horizontalLegend": "bool", + "legendWidth": "number", + "legendHeight": "number" } }, "sparkline": { diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte index 2226daaaeb..470673e9b6 100644 --- a/packages/standard-components/src/Chart/Donut.svelte +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -17,14 +17,15 @@ let chartElement = null let chartContainer = null + let chartSvgWidth = 0 + let chartSvg = null + export let _bb export let model let store = _bb.store - export let customMouseOver = null export let customMouseMove = null - export let customMouseOut = null export let customClick = null export let orderingFunction = null @@ -46,6 +47,10 @@ export let internalRadius = 25 export let isAnimated = true export let radiusHoverOffset = 0 + export let useLegend = true + export let horizontalLegend = false + export let legendWidth = null + export let legendHeight = null async function fetchData() { const FETCH_RECORDS_URL = `/api/views/all_${model}` @@ -79,6 +84,8 @@ }) function bindChartUIProps() { + chart.percentageFormat(".0f") + if (notNull(color)) { chart.colorSchema(getColorSchema(color)) } @@ -127,6 +134,8 @@ if (notNull(orderingFunction)) { chart.orderingFunction(orderingFunction) } + chartContainer.datum(_data).call(chart) + chartSvg = document.querySelector(`.${chartClass} .britechart`) } function bindChartEvents() { @@ -142,22 +151,33 @@ legendChart.clearHighlight() }) chart.on("customMouseOver", function(data) { - console.log("DATA", data.data) legendChart.highlight(data.data.id) }) } } + $: if (!width && chartSvg) { + width = chartSvg.clientWidth + chart.width(width) + chartContainer.datum(_data).call(chart) + } + $: _data = model ? $store[model] : data $: colorSchema = getColorSchema(color) -
- +
+
+ {#if useLegend} + + {/if} +
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte index 1bb73ff75d..eb01b9475e 100644 --- a/packages/standard-components/src/Chart/Legend.svelte +++ b/packages/standard-components/src/Chart/Legend.svelte @@ -4,7 +4,6 @@ import { select } from "d3-selection" import { onMount } from "svelte" - export let chartClass = "" export let useLegend = true export let data = [] export let width = null @@ -23,71 +22,59 @@ let legendContainer = null let legendElement = null - let chartSvgWidth = 0 - let chartSvg = null - - onMount(() => { - if (chartClass) { - chartSvg = document.querySelector(`.${chartClass} .britechart`) - } - }) - - function bindChartUIProps() { - if (width) { - legend.width(width) - } else if (chartSvg) { - legend.width(chartSvg.clientWidth) - } - - if (notNull(height)) { - legend.height(height) - } - - if (notNull(colorSchema)) { - legend.colorSchema(colorSchema) - } - - if (notNull(highlight)) { - legend.highlight(highlight) - } - - if (notNull(highlightByEntryId)) { - legend.highlightByEntryId(highlightByEntryId) - } - - if (notNull(isHorizontal)) { - legend.isHorizontal(isHorizontal) - } - - if (notNull(margin)) { - legend.margin(margin) - } - - if (notNull(marginRatio)) { - legend.marginRatio(marginRatio) - } - - if (notNull(markerSize)) { - legend.markerSize(markerSize) - } - - if (notNull(numberFormat)) { - legend.numberFormat(numberFormat) - } - - if (notNull(unit)) { - legend.unit(unit) - } - } - $: { if (legendElement) { legendContainer = select(legendElement) - bindChartUIProps() + legend.numberFormat(".0f") + + if (width) { + legend.width(width) + } + + if (notNull(height)) { + legend.height(height) + } + + if (notNull(colorSchema)) { + legend.colorSchema(colorSchema) + } + + if (notNull(highlight)) { + legend.highlight(highlight) + } + + if (notNull(highlightByEntryId)) { + legend.highlightByEntryId(highlightByEntryId) + } + + if (notNull(margin)) { + legend.margin(margin) + } + + if (notNull(marginRatio)) { + legend.marginRatio(marginRatio) + } + + if (notNull(markerSize)) { + legend.markerSize(markerSize) + } + + if (notNull(numberFormat)) { + legend.numberFormat(numberFormat) + } + + if (notNull(unit)) { + legend.unit(unit) + } legendContainer.datum(data).call(legend) } } + $: if (notNull(isHorizontal)) { + debugger + legend.isHorizontal(isHorizontal) + } + const legendClass = `legend-container`