forked from tsai/budibase
cmack
6 years ago
14 changed files with 706 additions and 75 deletions
@ -0,0 +1,67 @@ |
|||||
|
<script> |
||||
|
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte" |
||||
|
|
||||
|
/* |
||||
|
ISSUES: |
||||
|
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 |
||||
|
*/ |
||||
|
|
||||
|
let type = "bar" |
||||
|
let tooltip |
||||
|
|
||||
|
export let customMouseOver = () => tooltip.show() |
||||
|
export let customMouseMove = (datapoint, colorMapping, x, y) => |
||||
|
tooltip.update(datapoint, colorMapping, x, y) |
||||
|
export let customMouseOut = () => tooltip.hide() |
||||
|
export let customClick = null |
||||
|
|
||||
|
export let data = [] |
||||
|
export let xAxisLabel = "" |
||||
|
export let yAxisLabel = "" |
||||
|
export let betweenBarsPadding = 5 |
||||
|
export let gradient = null |
||||
|
export let color = "britecharts" |
||||
|
export let enableLabels = true |
||||
|
export let hasSingleBarHighlight = true |
||||
|
export let height = 200 |
||||
|
export let width = 300 |
||||
|
export let isAnimated = true |
||||
|
export let isHorizontal = true |
||||
|
export let labelOffset = null |
||||
|
export let labelsNumberFormat = null |
||||
|
export let labelSize = null |
||||
|
export let locale = null |
||||
|
export let nameLabel = null |
||||
|
export let numberFormat = null |
||||
|
|
||||
|
export let useLegend = true |
||||
|
|
||||
|
$: colorSchema = getColorSchema(color) |
||||
|
$: chartGradient = getChartGradient(gradient) |
||||
|
</script> |
||||
|
|
||||
|
<Chart |
||||
|
bind:tooltip |
||||
|
{type} |
||||
|
{data} |
||||
|
on={{ customClick, customMouseMove, customMouseOut, customMouseOver }} |
||||
|
useTooltip |
||||
|
{useLegend} |
||||
|
{betweenBarsPadding} |
||||
|
{chartGradient} |
||||
|
{colorSchema} |
||||
|
{enableLabels} |
||||
|
{hasSingleBarHighlight} |
||||
|
{height} |
||||
|
{width} |
||||
|
{isAnimated} |
||||
|
{isHorizontal} |
||||
|
{labelOffset} |
||||
|
{labelsNumberFormat} |
||||
|
{labelSize} |
||||
|
{locale} |
||||
|
{nameLabel} |
||||
|
{numberFormat} |
||||
|
{xAxisLabel} |
||||
|
{yAxisLabel} /> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<script> |
||||
|
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte" |
||||
|
|
||||
|
/* |
||||
|
ISSUES: |
||||
|
|
||||
|
*/ |
||||
|
|
||||
|
let type = "line" |
||||
|
let tooltip |
||||
|
|
||||
|
export let data = [] |
||||
|
export let axisTimeCombinations = "" |
||||
|
export let color = "britecharts" |
||||
|
export let grid = "horizontal" |
||||
|
export let aspectRatio = 0.5 |
||||
|
export let dateLabel = "date" |
||||
|
export let width = null |
||||
|
export let height = null |
||||
|
export let isAnimated = true |
||||
|
export let lineCurve = "linear" //see api for possible opts |
||||
|
export let locale = "en-GB" |
||||
|
export let numberFormat = "" |
||||
|
export let shouldShowAllDataPoints = true |
||||
|
export let topicLabel = null |
||||
|
export let valueLabel = null |
||||
|
export let xAxisLabel = "" |
||||
|
export let xAxisValueType = "date" |
||||
|
export let xAxisScale = "linear" |
||||
|
export let xAxisFormat = "day-month" |
||||
|
export let xAxisCustomFormat = "%H" |
||||
|
|
||||
|
$: 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} /> |
||||
|
|
||||
|
<!-- |
||||
|
|
||||
|
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} |
||||
|
|
||||
|
--> |
||||
@ -0,0 +1,3 @@ |
|||||
|
export { default as donut } from "./Donut.svelte" |
||||
|
export { default as bar } from "./Bar.svelte" |
||||
|
export { default as line } from "./Line.svelte" |
||||
Loading…
Reference in new issue