WIP: Bar, Brush, Bullet, Donut and Line
This commit is contained in:
cmack
parent
43a770876b
commit
5b51cbad9b
|
|
@ -393,7 +393,7 @@ export default {
|
|||
},
|
||||
properties: {
|
||||
design: {
|
||||
...all
|
||||
...all,
|
||||
},
|
||||
settings: [
|
||||
{
|
||||
|
|
@ -414,6 +414,12 @@ export default {
|
|||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Has Hover",
|
||||
key: "hasHoverAnimation",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Colors",
|
||||
key: "color",
|
||||
|
|
@ -459,6 +465,7 @@ export default {
|
|||
{
|
||||
label: "Show Legend",
|
||||
key: "useLegend ",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
],
|
||||
|
|
@ -561,8 +568,13 @@ export default {
|
|||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Label Offset",
|
||||
key: "labelOffset",
|
||||
label: "X Axis Label Offset",
|
||||
key: "xAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label Offset",
|
||||
key: "yAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
|
|
@ -598,6 +610,172 @@ export default {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Brush",
|
||||
_component: "@budibase/standard-components/brush",
|
||||
description: "Brush chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
presetProps: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
date: "2011-01-06T00:00:00Z",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
date: "2011-01-07T00:00:00Z",
|
||||
},
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Gradient",
|
||||
key: "gradient",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ value: "", label: "None" },
|
||||
{ value: "bluePurple", label: "Blue Purple" },
|
||||
{ value: "greenBlue", label: "Green Blue" },
|
||||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
key: "width",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Date Range",
|
||||
key: "dateRange",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Locale",
|
||||
key: "locale",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Time Interval",
|
||||
key: "roundingTimeInterval",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"timeDay",
|
||||
"timeMillisecond",
|
||||
"utcMillisecond",
|
||||
"timeSecond",
|
||||
"utcSecond",
|
||||
"timeMinute",
|
||||
"utcMinute",
|
||||
"timeHour",
|
||||
"utcHour",
|
||||
"utcDay",
|
||||
"timeWeek",
|
||||
"utcWeek",
|
||||
"timeSunday",
|
||||
"utcSunday",
|
||||
"timeMonday",
|
||||
"utcMonday",
|
||||
"timeTuesday",
|
||||
"utcTuesday",
|
||||
"timeWednesday",
|
||||
"utcWednesday",
|
||||
"timeThursday",
|
||||
"utcThursday",
|
||||
"timeFriday",
|
||||
"utcFriday",
|
||||
"timeSaturday",
|
||||
"utcSaturday",
|
||||
"timeMonth",
|
||||
"utcMonth",
|
||||
"timeYear",
|
||||
"utcYear",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "X Axis Format",
|
||||
key: "xAxisFormat",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"day-month",
|
||||
"minute-hour",
|
||||
"hour-daymonth",
|
||||
"month-year",
|
||||
"custom",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "X Ticks",
|
||||
key: "xTicks",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Bullet",
|
||||
_component: "@budibase/standard-components/bullet",
|
||||
description: "Bullet chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
presetProps: {
|
||||
data: {
|
||||
ranges: [130, 160, 250],
|
||||
measures: [150, 180],
|
||||
markers: [175],
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Color",
|
||||
key: "color",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"britecharts",
|
||||
"blueGreen",
|
||||
"green",
|
||||
"grey",
|
||||
"orange",
|
||||
"pink",
|
||||
"purple",
|
||||
"red",
|
||||
"teal",
|
||||
"yellow",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Title",
|
||||
key: "title",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Subtitle",
|
||||
key: "subtitle",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Axis Padding",
|
||||
key: "paddingBetweenAxisAndChart",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
key: "width",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Line",
|
||||
_component: "@budibase/standard-components/line",
|
||||
|
|
@ -684,6 +862,12 @@ export default {
|
|||
"yellow",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "X Axis Value Type",
|
||||
key: "xAxisValueType",
|
||||
control: OptionSelect,
|
||||
options: ["date", "number"],
|
||||
},
|
||||
{
|
||||
label: "Grid",
|
||||
key: "grid",
|
||||
|
|
@ -782,6 +966,11 @@ export default {
|
|||
key: "xAxisCustomFormat",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "X Axis Label",
|
||||
key: "xAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -261,11 +261,14 @@
|
|||
"width": "number",
|
||||
"hasFixedHighlightedSlice": "bool",
|
||||
"hasLastHoverSliceHighlighted": "bool",
|
||||
"hasHoverAnimation": "bool",
|
||||
"numberFormat": "string",
|
||||
"isAnimated": "bool",
|
||||
"externalRadius": "number",
|
||||
"internalRadius": "number",
|
||||
"radiusHoverOffset": "number",
|
||||
"useLegend": "bool"
|
||||
"useLegend": "bool",
|
||||
"percentageFormat": "string"
|
||||
}
|
||||
},
|
||||
"bar": {
|
||||
|
|
@ -281,7 +284,8 @@
|
|||
"width": "number",
|
||||
"isAnimated": "bool",
|
||||
"isHorizontal": "bool",
|
||||
"labelOffset": "number",
|
||||
"xAxisLabelOffset": "number",
|
||||
"yAxisLabelOffset": "number",
|
||||
"labelNumberFormat": "number",
|
||||
"labelSize": "number",
|
||||
"locale": "string",
|
||||
|
|
@ -289,7 +293,9 @@
|
|||
"numberLabel": "string",
|
||||
"xAxisLabel": "string",
|
||||
"yAxisLabel": "string",
|
||||
"useLegend": "bool"
|
||||
"useLegend": "bool",
|
||||
"xTicks": "number",
|
||||
"yTicks": "number"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
|
|
@ -310,13 +316,42 @@
|
|||
"shouldShowAllDataPoints": "bool",
|
||||
"topicLabel": "string",
|
||||
"valueLabel": "string",
|
||||
"xAxisLabel": "string",
|
||||
"xAxisValueType": "string",
|
||||
"xAxisScale": "string",
|
||||
"xAxisFormat": "string",
|
||||
"xAxisCustomFormat": "string",
|
||||
"xAxisLabel": "string"
|
||||
}
|
||||
},
|
||||
"brush":{
|
||||
"description": "brush chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"gradient": "string",
|
||||
"height": "number",
|
||||
"width": "number",
|
||||
"margin": "string",
|
||||
"dateRange": "string",
|
||||
"locale": "string",
|
||||
"roundingTimeInterval": "string",
|
||||
"xAxisFormat": "string",
|
||||
"xTicks": "number",
|
||||
"xAxisCustomFormat": "string"
|
||||
}
|
||||
},
|
||||
"bullet": {
|
||||
"description": "Bullet chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"color": "string",
|
||||
"customSubtitle": "string",
|
||||
"customTitle": "string",
|
||||
"numberFormat": "string",
|
||||
"paddingBetweenAxisAndChart": "number",
|
||||
"height": "number",
|
||||
"width": "number"
|
||||
}
|
||||
},
|
||||
"datachart": {
|
||||
"description": "shiny chart",
|
||||
"data": true,
|
||||
|
|
|
|||
|
|
@ -34,28 +34,35 @@
|
|||
export let gradient = null
|
||||
export let color = "britecharts"
|
||||
export let enableLabels = true
|
||||
export let hasPercentage = null
|
||||
export let hasSingleBarHighlight = true
|
||||
export let highlightBarFunction = null
|
||||
export let height = 200
|
||||
export let width = 300
|
||||
export let labelsMargin = null
|
||||
export let isAnimated = true
|
||||
export let isHorizontal = true
|
||||
export let labelOffset = null
|
||||
export let xAxisLabelOffset = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let labelsNumberFormat = null
|
||||
export let labelSize = null
|
||||
export let locale = null
|
||||
export let valueLabel = null
|
||||
export let nameLabel = null
|
||||
export let numberFormat = null
|
||||
export let labelsSize = null
|
||||
export let xTicks = null
|
||||
export let yTicks = null
|
||||
export let percentageAxisToMaxRatio = null
|
||||
|
||||
export let useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
//call charts props in here
|
||||
if (chartElement) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
bindChartTooltip()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -73,17 +80,26 @@
|
|||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (betweenBarsPadding) {
|
||||
chart.betweenBarsPadding(betweenBarsPadding)
|
||||
chart.betweenBarsPadding(Number(betweenBarsPadding))
|
||||
}
|
||||
if (enableLabels) {
|
||||
chart.enableLabels(enableLabels)
|
||||
}
|
||||
if (hasPercentage) {
|
||||
chart.hasPercentage(hasPercentage)
|
||||
}
|
||||
if (hasSingleBarHighlight) {
|
||||
chart.hasSingleBarHighlight(hasSingleBarHighlight)
|
||||
}
|
||||
if (labelsMargin) {
|
||||
chart.labelsMargin(labelsMargin)
|
||||
}
|
||||
if (height) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (highlightBarFunction) {
|
||||
chart.highlightBarFunction(highlightBarFunction)
|
||||
}
|
||||
if (width) {
|
||||
chart.width(width)
|
||||
}
|
||||
|
|
@ -93,14 +109,17 @@
|
|||
if (isHorizontal) {
|
||||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (labelOffset) {
|
||||
chart.labelOffset(labelOffset)
|
||||
if (yAxisLabelOffset) {
|
||||
chart.yAxisLabelOffset(Number(yAxisLabelOffset))
|
||||
}
|
||||
if (xAxisLabelOffset) {
|
||||
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
|
||||
}
|
||||
if (labelsNumberFormat) {
|
||||
chart.labelsNumberFormat(labelsNumberFormat)
|
||||
}
|
||||
if (labelSize) {
|
||||
chart.labelSize(labelSize)
|
||||
if (valueLabel) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (locale) {
|
||||
chart.locale(locale)
|
||||
|
|
@ -111,6 +130,18 @@
|
|||
if (numberFormat) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (labelsSize) {
|
||||
chart.labelsSize(labelsSize)
|
||||
}
|
||||
if (xTicks) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (yTicks) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
if (percentageAxisToMaxRatio) {
|
||||
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
|
|
@ -130,7 +161,6 @@
|
|||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
debugger
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
/*
|
||||
ISSUES
|
||||
- Chart gradient doesn't seem to do anything
|
||||
*/
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.brush()
|
||||
const chartClass = `brush-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let customBrushEnd = null
|
||||
export let customBrushStart = null
|
||||
|
||||
export let data = []
|
||||
export let gradient = null
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
|
||||
export let dateRange = null
|
||||
export let locale = null
|
||||
export let roundingTimeInterval = null
|
||||
export let xAxisFormat = null
|
||||
export let xTicks = null
|
||||
export let xAxisCustomFormat = null
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(gradient)) {
|
||||
chart.gradient(chartGradient)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(dateRange)) {
|
||||
chart.dateRange(dateRange)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(roundingTimeInterval)) {
|
||||
chart.roundingTimeInterval(roundingTimeInterval)
|
||||
}
|
||||
if (notNull(xAxisFormat)) {
|
||||
chart.xAxisFormat(xAxisFormat)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(xAxisCustomFormat)) {
|
||||
chart.xAxisCustomFormat(xAxisCustomFormat)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customBrushEnd) {
|
||||
chart.on("customBrushEnd", customBrushEnd)
|
||||
}
|
||||
if (customBrushStart) {
|
||||
chart.on("customBrushStart", customBrushStart)
|
||||
}
|
||||
}
|
||||
|
||||
$: chartGradient = getChartGradient(gradient)
|
||||
$: console.log(chartGradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.bullet()
|
||||
const chartClass = `bullet-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let aspectRatio = null
|
||||
export let color = "britecharts"
|
||||
export let customSubtitle = null
|
||||
export let customTitle = null
|
||||
export let numberFormat = null
|
||||
export let paddingBetweenAxisAndChart = null
|
||||
export let startMaxRangeOpacity = null
|
||||
export let ticks = null
|
||||
export let isReverse = false
|
||||
export let height = 200
|
||||
export let width = 200
|
||||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(customSubtitle)) {
|
||||
chart.customSubtitle(customSubtitle)
|
||||
}
|
||||
if (notNull(customTitle)) {
|
||||
chart.customTitle(customTitle)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(paddingBetweenAxisAndChart)) {
|
||||
chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart)
|
||||
}
|
||||
if (notNull(startMaxRangeOpacity)) {
|
||||
chart.startMaxRangeOpacity(startMaxRangeOpacity)
|
||||
}
|
||||
if (notNull(ticks)) {
|
||||
chart.ticks(ticks)
|
||||
}
|
||||
if (notNull(isReverse)) {
|
||||
chart.isReverse(isReverse)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
@ -1,36 +1,129 @@
|
|||
<script>
|
||||
import Chart, { getColorSchema } from "./Chart.svelte"
|
||||
import { getColorSchema, notNull } from "./utils.js"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let type = "donut"
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.donut()
|
||||
const chartClass = `donut-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let customMouseOver = null
|
||||
export let customMouseMove = null
|
||||
export let customMouseOut = null
|
||||
export let customClick = null
|
||||
|
||||
export let orderingFunction = null
|
||||
|
||||
export 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 centeredTextFunction = null
|
||||
export let externalRadius = 25
|
||||
export let percentageFormat = null
|
||||
export let hasFixedHighlightedSlice = false
|
||||
export let hasLastHoverSliceHighlighted = false
|
||||
export let hasHoverAnimation = true
|
||||
export let highlightSliceById = null
|
||||
export let numberFormat = null
|
||||
export let internalRadius = 25
|
||||
export let isAnimated = true
|
||||
export let radiusHoverOffset = 0
|
||||
export let useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chart.emptyDataConfig({
|
||||
showEmptySlice: true,
|
||||
emptySliceColor: "#000000",
|
||||
})
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(getColorSchema(color))
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(margin)) {
|
||||
chart.margin(margin)
|
||||
}
|
||||
if (notNull(centeredTextFunction)) {
|
||||
chart.centeredTextFunction(centeredTextFunction)
|
||||
}
|
||||
if (notNull(externalRadius)) {
|
||||
chart.externalRadius(externalRadius)
|
||||
}
|
||||
if (notNull(percentageFormat)) {
|
||||
chart.percentageFormat(percentageFormat)
|
||||
}
|
||||
if (notNull(hasFixedHighlightedSlice)) {
|
||||
chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice)
|
||||
}
|
||||
if (notNull(hasLastHoverSliceHighlighted)) {
|
||||
chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted)
|
||||
}
|
||||
if (notNull(hasHoverAnimation)) {
|
||||
chart.hasHoverAnimation(hasHoverAnimation)
|
||||
}
|
||||
if (notNull(highlightSliceById)) {
|
||||
chart.highlightSliceById(highlightSliceById)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(internalRadius)) {
|
||||
chart.internalRadius(internalRadius)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(radiusHoverOffset)) {
|
||||
chart.radiusHoverOffset(radiusHoverOffset)
|
||||
}
|
||||
if (notNull(orderingFunction)) {
|
||||
chart.orderingFunction(orderingFunction)
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<Chart
|
||||
{type}
|
||||
{useLegend}
|
||||
{data}
|
||||
{colorSchema}
|
||||
{height}
|
||||
{width}
|
||||
{margin}
|
||||
{externalRadius}
|
||||
{hasFixedHighlightedSlice}
|
||||
{hasLastHoverSliceHighlighted}
|
||||
{internalRadius}
|
||||
{isAnimated}
|
||||
{radiusHoverOffset} />
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,31 @@
|
|||
<script>
|
||||
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
/*
|
||||
ISSUES:
|
||||
|
||||
*/
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
let type = "line"
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.line()
|
||||
const chartClass = `line-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement
|
||||
let chartContainer
|
||||
let tooltip
|
||||
let tooltipContainer
|
||||
|
||||
export let customMouseHover = null
|
||||
export let customMouseMove = null
|
||||
export let customMouseOut = null
|
||||
export let customDataEntryClick = null
|
||||
export let customTouchMove = null
|
||||
|
||||
export let data = []
|
||||
export let axisTimeCombinations = ""
|
||||
export let color = "britecharts"
|
||||
export let axisTimeCombinations = ""
|
||||
export let grid = "horizontal"
|
||||
export let aspectRatio = 0.5
|
||||
export let dateLabel = "date"
|
||||
|
|
@ -29,31 +43,118 @@
|
|||
export let xAxisScale = "linear"
|
||||
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
|
||||
|
||||
onMount(() => {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(axisTimeCombinations)) {
|
||||
chart.axisTimeCombinations(axisTimeCombinations)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(dateLabel)) {
|
||||
chart.dateLabel(dateLabel)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(lineCurve)) {
|
||||
chart.lineCurve(lineCurve)
|
||||
}
|
||||
if (notNull(locale)) {
|
||||
chart.locale(locale)
|
||||
}
|
||||
if (notNull(numberFormat)) {
|
||||
chart.numberFormat(numberFormat)
|
||||
}
|
||||
if (notNull(shouldShowAllDataPoints)) {
|
||||
chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
|
||||
}
|
||||
if (notNull(topicLabel)) {
|
||||
chart.topicLabel(topicLabel)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(xAxisLabel)) {
|
||||
chart.xAxisLabel(xAxisLabel)
|
||||
}
|
||||
if (notNull(xAxisValueType)) {
|
||||
chart.xAxisValueType(xAxisValueType)
|
||||
}
|
||||
if (notNull(xAxisScale)) {
|
||||
chart.xAxisScale(xAxisScale)
|
||||
}
|
||||
if (notNull(xAxisFormat)) {
|
||||
chart.xAxisFormat(xAxisFormat)
|
||||
}
|
||||
if (notNull(xAxisCustomFormat)) {
|
||||
chart.xAxisCustomFormat(xAxisCustomFormat)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelPadding)) {
|
||||
chart.yAxisLabelPadding(yAxisLabelPadding)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
if (customMouseHover) {
|
||||
chart.on("customMouseHover", customMouseHover)
|
||||
}
|
||||
if (customMouseMove) {
|
||||
chart.on("customMouseMove", customMouseMove)
|
||||
}
|
||||
if (customMouseOut) {
|
||||
chart.on("customMouseOut", customMouseOut)
|
||||
}
|
||||
if (customDataEntryClick) {
|
||||
chart.on("customDataEntryClick", customDataEntryClick)
|
||||
}
|
||||
if (customTouchMove) {
|
||||
chart.on("customTouchMove", customTouchMove)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
$: console.log($$props)
|
||||
</script>
|
||||
|
||||
<Chart
|
||||
{type}
|
||||
{data}
|
||||
{colorSchema}
|
||||
{axisTimeCombinations}
|
||||
{lineCurve}
|
||||
{numberFormat}
|
||||
{height}
|
||||
{topicLabel}
|
||||
{shouldShowAllDataPoints}
|
||||
{xAxisLabel}
|
||||
{valueLabel}
|
||||
{xAxisValueType}
|
||||
{xAxisScale}
|
||||
{xAxisCustomFormat}
|
||||
{aspectRatio}
|
||||
{grid}
|
||||
tooltipThreshold={600}
|
||||
{width}
|
||||
{dateLabel} />
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
39
packages/standard-components/src/Chart/Temp.svelte
Normal file
39
packages/standard-components/src/Chart/Temp.svelte
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
import britecharts from "britecharts"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { select } from "d3-selection"
|
||||
import shortid from "shortid"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.chartname()
|
||||
const chartClass = `donut-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export 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 useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
export { default as donut } from "./Donut.svelte"
|
||||
export { default as bar } from "./Bar.svelte"
|
||||
export { default as line } from "./Line.svelte"
|
||||
export { default as brush } from "./Brush.svelte"
|
||||
export { default as bullet } from "./Bullet.svelte"
|
||||
|
||||
|
|
|
|||
19
packages/standard-components/src/Chart/utils.js
Normal file
19
packages/standard-components/src/Chart/utils.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import britecharts from "britecharts"
|
||||
|
||||
export const notNull = value => value || value === false
|
||||
|
||||
export const chartTypes = britecharts ? Object.keys(britecharts) : null
|
||||
|
||||
//expose chart color schemas for use or reference outside compnent
|
||||
export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null
|
||||
|
||||
//export color gradients for use or reference outside the component
|
||||
export const colorGradients = britecharts
|
||||
? britecharts.colors.colorGradients
|
||||
: null
|
||||
|
||||
export const getColorSchema = color =>
|
||||
color ? colorSchemas[color] : colorSchemas["britecharts"]
|
||||
|
||||
export const getChartGradient = gradient =>
|
||||
gradient ? colorGradients[gradient] : null
|
||||
Loading…
Reference in a new issue