Bar chart with tests and general bug fixes
This commit is contained in:
cmack
parent
ad75a142ea
commit
9ddf8d07ec
4 changed files with 130 additions and 55 deletions
|
|
@ -12,16 +12,18 @@
|
|||
</script>
|
||||
|
||||
<input type="checkbox" class="checkbox" id="_checkbox" />
|
||||
<label for="_checkbox" class:checked on:click={handleChange}>
|
||||
<div class="tick_mark" />
|
||||
</label>
|
||||
<div on:click={handleChange}>
|
||||
<div class="check-div" class:checked>
|
||||
<div class="tick_mark" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
.check-div {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
label:before {
|
||||
.check-div:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
label:active {
|
||||
.check-div:active {
|
||||
transform: translateY(-50%) scale(0.9);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1068,6 +1068,16 @@ export default {
|
|||
key: "model",
|
||||
control: ModelSelect,
|
||||
},
|
||||
{
|
||||
label: "Name Label",
|
||||
key: "nameLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
key: "valueLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label",
|
||||
key: "yAxisLabel",
|
||||
|
|
@ -1079,10 +1089,21 @@ export default {
|
|||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Bar Padding",
|
||||
key: "betweenBarsPadding",
|
||||
label: "X Axis Label Offset",
|
||||
key: "xAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label Offset",
|
||||
key: "yAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Enable Labels",
|
||||
key: "enableLabels",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Colors",
|
||||
key: "color",
|
||||
|
|
@ -1111,12 +1132,6 @@ export default {
|
|||
{ value: "orangePink", label: "Orange Pink" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Enable Labels",
|
||||
key: "enableLabels",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "Highlight Single Bar",
|
||||
key: "hasSingleBarHighlight",
|
||||
|
|
@ -1145,16 +1160,6 @@ export default {
|
|||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
},
|
||||
{
|
||||
label: "X Axis Label Offset",
|
||||
key: "xAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label Offset",
|
||||
key: "yAxisLabelOffset",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Label Number Format",
|
||||
key: "labelsNumberFormat",
|
||||
|
|
@ -1165,32 +1170,6 @@ export default {
|
|||
key: "labelSize",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Locale",
|
||||
key: "locale",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Name Label",
|
||||
key: "nameLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Value Label",
|
||||
key: "valueLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Number Format",
|
||||
key: "numberFormat",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Use Legend",
|
||||
key: "useLegend",
|
||||
keyValue: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
import shortid from "shortid"
|
||||
/*
|
||||
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
|
||||
- x and y axis label set and appear in the dom but do not display next to the axis
|
||||
- x and y axis label offset - does effect position of labels but does not render text (see above)
|
||||
- x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
|
||||
specifically and doing this: <tspan x="-10" dy="0.32em">4.0</tspan>
|
||||
*/
|
||||
|
||||
let tooltip
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
export let data = []
|
||||
export let xAxisLabel = ""
|
||||
export let yAxisLabel = ""
|
||||
export let betweenBarsPadding = 5
|
||||
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
|
||||
export let gradient = null
|
||||
export let color = "britecharts"
|
||||
export let enableLabels = true
|
||||
|
|
@ -63,7 +65,9 @@
|
|||
|
||||
onMount(async () => {
|
||||
if (chartElement) {
|
||||
await fetchData()
|
||||
if (model) {
|
||||
await fetchData()
|
||||
}
|
||||
chartContainer = select(`.${chartClass}`)
|
||||
bindChartUIProps()
|
||||
bindChartEvents()
|
||||
|
|
@ -87,6 +91,9 @@
|
|||
}
|
||||
|
||||
function bindChartUIProps() {
|
||||
chart.numberFormat(".1f")
|
||||
chart.labelsNumberFormat(".1f")
|
||||
|
||||
if (color) {
|
||||
chart.colorSchema(colorSchema)
|
||||
}
|
||||
|
|
@ -130,7 +137,7 @@
|
|||
chart.isHorizontal(isHorizontal)
|
||||
}
|
||||
if (yAxisLabelOffset) {
|
||||
chart.yAxisLabelOffset(Number(yAxisLabelOffset))
|
||||
chart.yAxisLabelOffset(yAxisLabelOffset)
|
||||
}
|
||||
if (xAxisLabelOffset) {
|
||||
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
|
||||
|
|
@ -162,6 +169,7 @@
|
|||
if (percentageAxisToMaxRatio) {
|
||||
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
|
||||
}
|
||||
chartContainer.datum(_data).call(chart)
|
||||
}
|
||||
|
||||
function bindChartEvents() {
|
||||
|
|
@ -181,6 +189,7 @@
|
|||
|
||||
function bindChartTooltip() {
|
||||
tooltip = britecharts.miniTooltip()
|
||||
tooltip.numberFormat(".0f")
|
||||
tooltipContainer = select(`.${chartClass} .metadata-group`)
|
||||
tooltipContainer.datum([]).call(tooltip)
|
||||
}
|
||||
|
|
@ -191,7 +200,19 @@
|
|||
$: chartGradient = getChartGradient(gradient)
|
||||
</script>
|
||||
|
||||
<!-- SVG Test
|
||||
<svg viewBox="6 -8 200 22">
|
||||
<text x="5" y="10" class="text-svg">Hello World</text>
|
||||
</svg>-->
|
||||
|
||||
<div bind:this={chartElement} class={chartClass} />
|
||||
{#if useLegend}
|
||||
<div class={legendClass} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.text-svg {
|
||||
font: italic 15px serif;
|
||||
fill: red;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
73
packages/standard-components/src/Chart/tests/bar.html
Normal file
73
packages/standard-components/src/Chart/tests/bar.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js"
|
||||
type="text/javascript"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<article>
|
||||
<h2 class="tutorial__heading">Bar Chart</h2>
|
||||
<div class="bar-chart"></div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
const dataset = [
|
||||
{
|
||||
"name": "Radiating",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"name": "Opalescent",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"name": "Shining",
|
||||
"value": 3
|
||||
},
|
||||
{
|
||||
"name": "Vibrant",
|
||||
"value": 6
|
||||
},
|
||||
{
|
||||
"name": "Vivid",
|
||||
"value": 6
|
||||
},
|
||||
{
|
||||
"name": "Brilliant",
|
||||
"value": 1
|
||||
}
|
||||
]
|
||||
|
||||
const barContainer = d3.select('.bar-chart');
|
||||
|
||||
const barChart = britecharts.bar()
|
||||
|
||||
barChart
|
||||
.width(700)
|
||||
.height(300)
|
||||
.enableLabels(true)
|
||||
.labelsNumberFormat('.0%')
|
||||
.isAnimated(true)
|
||||
.yAxisLabel("Quantity")
|
||||
.xAxisLabel("Color")
|
||||
.betweenBarsPadding("0.8")
|
||||
|
||||
// .on('customMouseOver', tooltip.show)
|
||||
// .on('customMouseMove', tooltip.update)
|
||||
// .on('customMouseOut', tooltip.hide);
|
||||
|
||||
barContainer.datum(dataset).call(barChart);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue