WIP: Groupedbar, Heatmap and Sparkline Charts
This commit is contained in:
cmack
parent
5b51cbad9b
commit
5b49660ce6
|
|
@ -471,6 +471,143 @@ export default {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Heatmap",
|
||||
_component: "@budibase/standard-components/heatmap",
|
||||
description: "Heatmap chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
presetProps: {
|
||||
data: [
|
||||
{
|
||||
day: 0,
|
||||
hour: 0,
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
day: 0,
|
||||
hour: 1,
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Color",
|
||||
key: "color",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"britecharts",
|
||||
"blueGreen",
|
||||
"green",
|
||||
"grey",
|
||||
"orange",
|
||||
"pink",
|
||||
"purple",
|
||||
"red",
|
||||
"teal",
|
||||
"yellow",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Show Legend",
|
||||
key: "useLegend ",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
key: "width",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Boxsize",
|
||||
key: "boxSize",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Sparkline",
|
||||
_component: "@budibase/standard-components/sparkline",
|
||||
description: "Sparkline 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: "Line Gradient",
|
||||
key: "lineGradient",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ value: "", label: "None" },
|
||||
{ value: "bluePurple", label: "Blue Purple" },
|
||||
{ value: "greenBlue", label: "Green Blue" },
|
||||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Area Gradient",
|
||||
key: "areaGradient",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ value: "", label: "None" },
|
||||
{ value: "bluePurple", label: "Blue Purple" },
|
||||
{ value: "greenBlue", label: "Green Blue" },
|
||||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "height",
|
||||
label: "Height",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
key: "width",
|
||||
label: "Width",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
key: "dateLabel",
|
||||
label: "Date Label",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
key: "isAnimated",
|
||||
label: "Is Animated",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
{
|
||||
key: "titleText",
|
||||
label: "Title Text",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
key: "valueLabel",
|
||||
label: "Value Label",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Bar",
|
||||
_component: "@budibase/standard-components/bar",
|
||||
|
|
@ -717,6 +854,100 @@ export default {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Groupedbar",
|
||||
_component: "@budibase/standard-components/groupedbar",
|
||||
description: "Groupedbar chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
presetProps: {
|
||||
data: [
|
||||
{
|
||||
name: "2011-01",
|
||||
group: "Direct",
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
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: "Height",
|
||||
key: "height",
|
||||
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: "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,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Bullet",
|
||||
_component: "@budibase/standard-components/bullet",
|
||||
|
|
|
|||
|
|
@ -271,6 +271,21 @@
|
|||
"percentageFormat": "string"
|
||||
}
|
||||
},
|
||||
"sparkline": {
|
||||
"description": "Sparkline Chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"areaGradient": "string",
|
||||
"height": "number",
|
||||
"width": "number",
|
||||
"dateLabel": "string",
|
||||
"duration": "string",
|
||||
"isAnimated": "bool",
|
||||
"lineGradient": "string",
|
||||
"titleText": "string",
|
||||
"valueLabel": "string"
|
||||
}
|
||||
},
|
||||
"bar": {
|
||||
"description": "Bar Chart",
|
||||
"data": true,
|
||||
|
|
@ -339,6 +354,38 @@
|
|||
"xAxisCustomFormat": "string"
|
||||
}
|
||||
},
|
||||
"heatmap": {
|
||||
"description": "Groupedbar chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"color": "string",
|
||||
"height": "number",
|
||||
"width": "number",
|
||||
"useLegend": "bool",
|
||||
"yAxisLabel": "string",
|
||||
"boxSize": "number"
|
||||
}
|
||||
},
|
||||
"groupedbar": {
|
||||
"description": "Groupedbar chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"color": "string",
|
||||
"height": "string",
|
||||
"width": "string",
|
||||
"margin": "string",
|
||||
"aspectRatio": "number",
|
||||
"grid":"string",
|
||||
"groupLabel": "string",
|
||||
"isAnimated": "bool",
|
||||
"isHorizontal": "bool",
|
||||
"nameLabel": "string",
|
||||
"valueLabel":"string",
|
||||
"yTicks": "string",
|
||||
"yTickTextOffset": "string",
|
||||
"useLegend": "bool"
|
||||
}
|
||||
},
|
||||
"bullet": {
|
||||
"description": "Bullet chart",
|
||||
"data": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
<script>
|
||||
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||||
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"
|
||||
|
||||
const _id = shortid.generate()
|
||||
|
||||
const chart = britecharts.groupedBar()
|
||||
const chartClass = `groupedbar-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let 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 = []
|
||||
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 aspectRatio = null
|
||||
export let grid = null
|
||||
export let groupLabel = null
|
||||
export let isAnimated = null
|
||||
export let isHorizontal = null
|
||||
export let nameLabel = null
|
||||
export let valueLabel = null
|
||||
export let valueLabelFormat = null
|
||||
export let xTicks = null
|
||||
export let yAxisLabel = null
|
||||
export let yAxisLabelOffset = null
|
||||
export let yTicks = null
|
||||
export let yTickTextOffset = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
// bindChartEvents()
|
||||
chartContainer.datum(data).call(chart)
|
||||
// bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(aspectRatio)) {
|
||||
chart.aspectRatio(aspectRatio)
|
||||
}
|
||||
if (notNull(grid)) {
|
||||
chart.grid(grid)
|
||||
}
|
||||
if (notNull(groupLabel)) {
|
||||
chart.groupLabel(groupLabel)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(isHorizontal)) {
|
||||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (notNull(nameLabel)) {
|
||||
chart.nameLabel(nameLabel)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
if (notNull(valueLabelFormat)) {
|
||||
chart.valueLabelFormat(valueLabelFormat)
|
||||
}
|
||||
if (notNull(xTicks)) {
|
||||
chart.xTicks(xTicks)
|
||||
}
|
||||
if (notNull(yAxisLabel)) {
|
||||
chart.yAxisLabel(yAxisLabel)
|
||||
}
|
||||
if (notNull(yAxisLabelOffset)) {
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (notNull(yTicks)) {
|
||||
chart.yTicks(yTicks)
|
||||
}
|
||||
if (notNull(yTickTextOffset)) {
|
||||
chart.yTickTextOffset(yTickTextOffset)
|
||||
}
|
||||
}
|
||||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<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.heatmap()
|
||||
const chartClass = `heatmap-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
|
||||
export let yAxisLabels = null
|
||||
export let boxSize = null
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(color)) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(boxSize)) {
|
||||
chart.boxSize(boxSize)
|
||||
}
|
||||
if (notNull(yAxisLabels)) {
|
||||
chart.yAxisLabels(yAxisLabels)
|
||||
}
|
||||
}
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -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.sparkline()
|
||||
const chartClass = `sparkline-container-${_id}`
|
||||
const legendClass = `legend-container-${_id}`
|
||||
|
||||
let chartElement = null
|
||||
let chartContainer = null
|
||||
|
||||
export let data = []
|
||||
export let areaGradient = null
|
||||
export let height = null
|
||||
export let width = null
|
||||
export let dateLabel = null
|
||||
export let duration = null
|
||||
export let isAnimated = null
|
||||
export let lineGradient = null
|
||||
export let titleText = null
|
||||
export let titleTextStyle = null
|
||||
export let valueLabel = null
|
||||
export let useLegend = true
|
||||
|
||||
onMount(() => {
|
||||
if (chart) {
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
chartContainer.datum(data).call(chart)
|
||||
}
|
||||
})
|
||||
|
||||
function bindChartUIProps() {
|
||||
if (notNull(areaGradient)) {
|
||||
chart.areaGradient(aGradient)
|
||||
}
|
||||
if (notNull(lineGradient)) {
|
||||
chart.lineGradient(lGradient)
|
||||
}
|
||||
if (notNull(height)) {
|
||||
chart.height(height)
|
||||
}
|
||||
if (notNull(width)) {
|
||||
chart.width(width)
|
||||
}
|
||||
if (notNull(dateLabel)) {
|
||||
chart.dateLabel(dateLabel)
|
||||
}
|
||||
if (notNull(duration)) {
|
||||
chart.duration(duration)
|
||||
}
|
||||
if (notNull(isAnimated)) {
|
||||
chart.isAnimated(isAnimated)
|
||||
}
|
||||
if (notNull(titleText)) {
|
||||
chart.titleText(titleText)
|
||||
}
|
||||
if (notNull(titleTextStyle)) {
|
||||
chart.titleTextStyle(titleTextStyle)
|
||||
}
|
||||
if (notNull(valueLabel)) {
|
||||
chart.valueLabel(valueLabel)
|
||||
}
|
||||
}
|
||||
|
||||
$: aGradient = getChartGradient(areaGradient)
|
||||
$: lGradient = getChartGradient(lineGradient)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
bindChartTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
$: colorSchema = getColorSchema(color)
|
||||
</script>
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
|
|
|
|||
|
|
@ -3,4 +3,7 @@ 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"
|
||||
export { default as groupedbar } from "./GroupedBar.svelte"
|
||||
export { default as heatmap } from "./Heatmap.svelte"
|
||||
export { default as sparkline } from "./Sparkline.svelte"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue