bar chart
This commit is contained in:
parent
99cb3bd2c9
commit
43a770876b
|
@ -145,6 +145,7 @@
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instance-name {
|
.instance-name {
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
<script>
|
<script>
|
||||||
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
|
import { getColorSchema, getChartGradient } from "./Chart.svelte"
|
||||||
|
import britecharts from "britecharts"
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
|
import { select } from "d3-selection"
|
||||||
|
import shortid from "shortid"
|
||||||
/*
|
/*
|
||||||
ISSUES:
|
ISSUES:
|
||||||
nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
|
nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
|
||||||
https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
|
https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
|
||||||
*/
|
*/
|
||||||
|
|
||||||
let type = "bar"
|
|
||||||
let tooltip
|
let tooltip
|
||||||
|
const _id = shortid.generate()
|
||||||
|
const chart = britecharts.bar()
|
||||||
|
const chartClass = `bar-container-${_id}`
|
||||||
|
const legendClass = `legend-container-${_id}`
|
||||||
|
|
||||||
|
let chartElement = null
|
||||||
|
let chartContainer = null
|
||||||
|
let tooltipContainer = null
|
||||||
|
|
||||||
export let customMouseOver = () => tooltip.show()
|
export let customMouseOver = () => tooltip.show()
|
||||||
export let customMouseMove = (datapoint, colorMapping, x, y) =>
|
export let customMouseMove = (datapoint, colorMapping, x, y) =>
|
||||||
|
@ -37,31 +48,98 @@
|
||||||
|
|
||||||
export let useLegend = true
|
export let useLegend = true
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
//call charts props in here
|
||||||
|
if (chartElement) {
|
||||||
|
chartContainer = select(`.${chartClass}`)
|
||||||
|
bindChartUIProps()
|
||||||
|
bindChartEvents()
|
||||||
|
bindChartTooltip()
|
||||||
|
chartContainer.datum(data).call(chart)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function bindChartUIProps() {
|
||||||
|
if (color) {
|
||||||
|
chart.colorSchema(colorSchema)
|
||||||
|
}
|
||||||
|
if (gradient) {
|
||||||
|
chart.chartGradient(chartGradient)
|
||||||
|
}
|
||||||
|
if (xAxisLabel) {
|
||||||
|
chart.xAxisLabel(xAxisLabel)
|
||||||
|
}
|
||||||
|
if (yAxisLabel) {
|
||||||
|
chart.yAxisLabel(yAxisLabel)
|
||||||
|
}
|
||||||
|
if (betweenBarsPadding) {
|
||||||
|
chart.betweenBarsPadding(betweenBarsPadding)
|
||||||
|
}
|
||||||
|
if (enableLabels) {
|
||||||
|
chart.enableLabels(enableLabels)
|
||||||
|
}
|
||||||
|
if (hasSingleBarHighlight) {
|
||||||
|
chart.hasSingleBarHighlight(hasSingleBarHighlight)
|
||||||
|
}
|
||||||
|
if (height) {
|
||||||
|
chart.height(height)
|
||||||
|
}
|
||||||
|
if (width) {
|
||||||
|
chart.width(width)
|
||||||
|
}
|
||||||
|
if (isAnimated) {
|
||||||
|
chart.isAnimated(isAnimated)
|
||||||
|
}
|
||||||
|
if (isHorizontal) {
|
||||||
|
chart.isHorizontal(isHorizontal)
|
||||||
|
}
|
||||||
|
if (labelOffset) {
|
||||||
|
chart.labelOffset(labelOffset)
|
||||||
|
}
|
||||||
|
if (labelsNumberFormat) {
|
||||||
|
chart.labelsNumberFormat(labelsNumberFormat)
|
||||||
|
}
|
||||||
|
if (labelSize) {
|
||||||
|
chart.labelSize(labelSize)
|
||||||
|
}
|
||||||
|
if (locale) {
|
||||||
|
chart.locale(locale)
|
||||||
|
}
|
||||||
|
if (nameLabel) {
|
||||||
|
chart.nameLabel(nameLabel)
|
||||||
|
}
|
||||||
|
if (numberFormat) {
|
||||||
|
chart.numberFormat(numberFormat)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindChartEvents() {
|
||||||
|
if (customMouseMove) {
|
||||||
|
chart.on("customMouseMove", customMouseMove)
|
||||||
|
}
|
||||||
|
if (customMouseOut) {
|
||||||
|
chart.on("customMouseOut", customMouseOut)
|
||||||
|
}
|
||||||
|
if (customMouseOver) {
|
||||||
|
chart.on("customMouseOver", customMouseOver)
|
||||||
|
}
|
||||||
|
if (customClick) {
|
||||||
|
chart.on("customClick", customClick)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindChartTooltip() {
|
||||||
|
tooltip = britecharts.miniTooltip()
|
||||||
|
debugger
|
||||||
|
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||||
|
tooltipContainer.datum([]).call(tooltip)
|
||||||
|
}
|
||||||
|
|
||||||
$: colorSchema = getColorSchema(color)
|
$: colorSchema = getColorSchema(color)
|
||||||
$: chartGradient = getChartGradient(gradient)
|
$: chartGradient = getChartGradient(gradient)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Chart
|
<div bind:this={chartElement} class={chartClass} />
|
||||||
bind:tooltip
|
{#if useLegend}
|
||||||
{type}
|
<div class={legendClass} />
|
||||||
{data}
|
{/if}
|
||||||
on={{ customClick, customMouseMove, customMouseOut, customMouseOver }}
|
|
||||||
useTooltip
|
|
||||||
{useLegend}
|
|
||||||
{betweenBarsPadding}
|
|
||||||
{chartGradient}
|
|
||||||
{colorSchema}
|
|
||||||
{enableLabels}
|
|
||||||
{hasSingleBarHighlight}
|
|
||||||
{height}
|
|
||||||
{width}
|
|
||||||
{isAnimated}
|
|
||||||
{isHorizontal}
|
|
||||||
{labelOffset}
|
|
||||||
{labelsNumberFormat}
|
|
||||||
{labelSize}
|
|
||||||
{locale}
|
|
||||||
{nameLabel}
|
|
||||||
{numberFormat}
|
|
||||||
{xAxisLabel}
|
|
||||||
{yAxisLabel} />
|
|
||||||
|
|
Loading…
Reference in New Issue