mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-28 07:58:29 +01:00
356 lines
9.6 KiB
HTML
356 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
|
|
<link href="teststyle.css" rel="stylesheet" type='text/css'>
|
|
<script src="../bower_components/d3/d3.js"></script>
|
|
<script src="../build/nv.d3.js"></script>
|
|
|
|
<body class='with-3d-shadow with-transitions'>
|
|
<h3>Box Plot test cases</h3>
|
|
<div class='chart half' id="outlierObjects">
|
|
Normal data with outlier objects (partial overrides: value/label/color)
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="customModel">
|
|
Custom data model overrides
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="emptyChart">
|
|
Empty chart
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="chart1">
|
|
Normal data (maxBoxWidth and staggerLabel options)
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="forceY">
|
|
Normal data (forceY)
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="chart3">
|
|
Single box
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="chart4">
|
|
Twelve boxes (repeating)
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="bad_whiskers">
|
|
Bad whiskers
|
|
<svg></svg>
|
|
</div>
|
|
<div class='chart half' id="bad_outliers">
|
|
Bad outliers
|
|
<svg></svg>
|
|
</div>
|
|
<script>
|
|
|
|
function testData1() {
|
|
return [
|
|
{
|
|
label: "Sample A",
|
|
values: {
|
|
Q1: 120,
|
|
Q2: 150,
|
|
Q3: 200,
|
|
whisker_low: 115,
|
|
whisker_high: 210,
|
|
outliers: [50, 100, 225]
|
|
},
|
|
},
|
|
{
|
|
label: "Sample B",
|
|
values: {
|
|
Q1: 300,
|
|
Q2: 350,
|
|
Q3: 400,
|
|
whisker_low: 225,
|
|
whisker_high: 400,
|
|
outliers: [175]
|
|
},
|
|
},
|
|
{
|
|
label: "Sample C",
|
|
values: {
|
|
Q1: 50,
|
|
Q2: 100,
|
|
Q3: 125,
|
|
whisker_low: 25,
|
|
whisker_high: 175,
|
|
outliers: [0]
|
|
},
|
|
}
|
|
];
|
|
}
|
|
|
|
function testOutlierObjects() {
|
|
return [
|
|
{
|
|
label: "A1",
|
|
values: { Q1: 120, Q2: 150, Q3: 200, whisker_low: 115, whisker_high: 210,
|
|
outliers: [
|
|
{value: 50, label: 'apples'}, {value: 100, color: '#000000'},
|
|
{value: 250, label: 'Artifical outlier', color: '#F00'}, {value: 225}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
label: "B2",
|
|
values: { Q1: 300, Q2: 350, Q3: 400, whisker_low: 225, whisker_high: 400,
|
|
outliers: [{value: 75}]
|
|
}
|
|
},
|
|
{
|
|
label: "C3",
|
|
values: { Q1: 50, Q2: 100, Q3: 125, whisker_low: 25, whisker_high: 175,
|
|
outliers: [{value: 0, label: 'Bananas', color: '#000000'}]
|
|
}
|
|
}
|
|
];
|
|
}
|
|
|
|
function testCustomObjectModel() {
|
|
return [
|
|
{
|
|
title: 'Custom Attributes 1',
|
|
q1: 1.05, q3: 2.7, maxOutlier: 6, maxRegularValue: 4.4,
|
|
mean: 3.365, median: 1.3, minOutlier: 0.4, minRegularValue: 0.4,
|
|
outlData: [
|
|
{data: 6, text: 'Source 1'},
|
|
{data: 14.5, text: 'Source 2'},
|
|
{data: 12, text: 'Reference Value', color: '#000'},
|
|
{data: 4.5, text: 'Source 3'}
|
|
],
|
|
seriesColor: '#247E42'
|
|
},
|
|
{
|
|
title: 'Custom Attributes 2',
|
|
q1: 1.05, q3: 2.849999996, maxOutlier: 4.9, maxRegularValue: 4.9,
|
|
mean: 3.4949999, median: 1.5, minOutlier: 0.3, minRegularValue: 0.3,
|
|
outlData: [
|
|
{data: 15.2, text: 'Source 1'},
|
|
{data: 10, text: 'Reference Value', color: '#F00'},
|
|
{data: 7.5, color: '#00F'}
|
|
],
|
|
seriesColor: '#334693'
|
|
}
|
|
]
|
|
}
|
|
|
|
function testSingleBox() {
|
|
return [
|
|
{
|
|
label: 'Sample A',
|
|
values: {
|
|
Q1: 120,
|
|
Q2: 150,
|
|
Q3: 200,
|
|
whisker_low: 115,
|
|
whisker_high: 210,
|
|
outliers: [50, 100, 225]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
function testDozenBoxes() {
|
|
return [
|
|
{ label: "Sample A", values: { Q1: 120, Q2: 150, Q3: 200, whisker_low: 115, whisker_high: 210, outliers: [50, 100, 225] } },
|
|
{ label: "Sample B", values: { Q1: 300, Q2: 350, Q3: 400, whisker_low: 225, whisker_high: 400, outliers: [175] } },
|
|
{ label: "Sample C", values: { Q1: 50, Q2: 100, Q3: 125, whisker_low: 25, whisker_high: 75, outliers: [0] } },
|
|
|
|
{ label: "Sample D", values: { Q1: 120, Q2: 150, Q3: 200, whisker_low: 115, whisker_high: 210, outliers: [50, 100, 225] } },
|
|
{ label: "Sample E", values: { Q1: 300, Q2: 350, Q3: 400, whisker_low: 225, whisker_high: 400, outliers: [175] } },
|
|
{ label: "Sample F", values: { Q1: 50, Q2: 100, Q3: 125, whisker_low: 25, whisker_high: 75, outliers: [0] } },
|
|
|
|
{ label: "Sample H", values: { Q1: 120, Q2: 150, Q3: 200, whisker_low: 115, whisker_high: 210, outliers: [50, 100, 225] } },
|
|
{ label: "Sample I", values: { Q1: 300, Q2: 350, Q3: 400, whisker_low: 225, whisker_high: 400, outliers: [175] } },
|
|
{ label: "Sample J", values: { Q1: 50, Q2: 100, Q3: 125, whisker_low: 25, whisker_high: 75, outliers: [0] } },
|
|
|
|
{ label: "Sample K", values: { Q1: 120, Q2: 150, Q3: 200, whisker_low: 115, whisker_high: 210, outliers: [50, 100, 225] } },
|
|
{ label: "Sample L", values: { Q1: 300, Q2: 350, Q3: 400, whisker_low: 225, whisker_high: 400, outliers: [175] } },
|
|
{ label: "Sample M", values: { Q1: 50, Q2: 100, Q3: 125, whisker_low: 25, whisker_high: 75, outliers: [0] } },
|
|
]
|
|
}
|
|
|
|
function badWhiskers() {
|
|
return [
|
|
{
|
|
"label": "Missing High",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: 50,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Missing Low",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_high: 200,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Null High",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: 50,
|
|
whisker_high: null,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Null Low",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: null,
|
|
whisker_high: 200,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Both Missing",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Both Null",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: null,
|
|
whisker_high: null,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
"label": "Both Missing with Outliers",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
outliers: [25, 250]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
function badOutliers() {
|
|
return [
|
|
{
|
|
"label": "Empty outlier list",
|
|
"values": {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: 50,
|
|
whisker_high: 200,
|
|
outliers: []
|
|
}
|
|
},
|
|
{
|
|
label: "Null outliers",
|
|
values: {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: 50,
|
|
whisker_high: 200,
|
|
outliers: null
|
|
}
|
|
},
|
|
{
|
|
label: "No outliers",
|
|
values: {
|
|
Q1: 100,
|
|
Q2: 125,
|
|
Q3: 150,
|
|
whisker_low: 50,
|
|
whisker_high: 200,
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
defaultChartConfig("outlierObjects", testOutlierObjects, {
|
|
outlierValue: function (d) { return d.value },
|
|
outlierColor: function (d) { return d.color },
|
|
outlierLabel: function (d) {
|
|
if (d.label) { return d.value + ' ' + d.label }
|
|
return d.value;
|
|
}
|
|
});
|
|
|
|
defaultChartConfig("customModel", testCustomObjectModel, {
|
|
x: function (d) { return d.title },
|
|
itemColor: function (d) { return d.seriesColor },
|
|
outliers: function (d) { return d.outlData },
|
|
outlierValue: function (d) { return d.data },
|
|
outlierLabel: function (d) {
|
|
if (d.text) { return d.data + ' ' + d.text }
|
|
return d.data;
|
|
},
|
|
outlierColor: function (d) { return d.color },
|
|
q1: function (d) { return d.q1 },
|
|
q2: function (d) { return d.median },
|
|
q3: function (d) { return d.q3 },
|
|
wl: function (d) { return d.minRegularValue },
|
|
wh: function (d) { return d.maxRegularValue }
|
|
});
|
|
|
|
defaultChartConfig("emptyChart", {}, {});
|
|
|
|
defaultChartConfig("chart1", testData1, {
|
|
staggerLabels: true,
|
|
maxBoxWidth: 32
|
|
});
|
|
|
|
defaultChartConfig("forceY", testData1, {
|
|
yDomain: [0, 500]
|
|
});
|
|
|
|
defaultChartConfig("chart3", testSingleBox, {});
|
|
|
|
defaultChartConfig("chart4", testDozenBoxes, {
|
|
staggerLabels: true,
|
|
maxBoxWidth: 32
|
|
});
|
|
|
|
defaultChartConfig("bad_whiskers", badWhiskers, {
|
|
staggerLabels: true
|
|
});
|
|
defaultChartConfig("bad_outliers", badOutliers, {});
|
|
|
|
function defaultChartConfig(containerId, data, chartOptions) {
|
|
nv.addGraph(function() {
|
|
var chart;
|
|
chart = nv.models.boxPlotChart()
|
|
.x(function(d) { return d.label })
|
|
.y(function(d) { return d.values.Q3 })
|
|
.margin({bottom: 100});
|
|
chart.options(chartOptions);
|
|
|
|
d3.select('#' + containerId + ' svg')
|
|
.datum(data)
|
|
.call(chart);
|
|
|
|
nv.utils.windowResize(chart.update);
|
|
|
|
return chart;
|
|
});
|
|
}
|
|
</script>
|