+
- IOSTAT Chart Dataset Selection:
-
+ IOSTAT Chart Dataset Selection:
+
+
+
-
+
- MPSTAT Chart Dataset Selection:
-
+ MPSTAT Chart Dataset Selection:
+
+
+
);
diff --git a/jschart/index.js b/jschart/index.js
index 931b7ac..c656721 100644
--- a/jschart/index.js
+++ b/jschart/index.js
@@ -2813,8 +2813,13 @@ function build_chart(chart) {
);
return;
}
-
- var table = chart.dom.div.append("table");
+
+ var table = chart.dom.div.append("table")
+ .attr("class", "graphtable")
+ .style("max-width", chart.dimensions.viewport_width+"px")
+ .style("flex", "0.9 0.9 auto")
+ .style("width", 0)
+ .style("word-break", "break-all");
var row = table.append("tr")
.classed("wrapper", true)
@@ -2917,13 +2922,8 @@ function build_chart(chart) {
.enter()
.append("svg")
.classed("svg", true)
- .attr(
- "width",
- chart.dimensions.viewport_width +
- chart.dimensions.margin.left +
- chart.dimensions.margin.right
- )
- .attr("height", get_svg_height(chart));
+ .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+ chart.dimensions.margin.right) + " " + (get_svg_height(chart) ) + "");
chart.chart.defs = chart.chart.svg.append("defs");
if (!chart.options.scatterplot) {
@@ -2973,7 +2973,7 @@ function build_chart(chart) {
.data([chart])
.enter()
.append("text")
- .classed("actionlabel endtext", true)
+ .classed("actionlabel endtext reset", true)
.attr(
"x",
chart.dimensions.viewport_width + chart.dimensions.margin.right - 10
@@ -2994,7 +2994,7 @@ function build_chart(chart) {
if (typeof saveSvgAsPng.saveSvgAsPng == "function") {
chart.chart.container
.append("text")
- .classed("actionlabel middletext", true)
+ .classed("actionlabel middletext savePNG", true)
.attr("x", (chart.dimensions.viewport_width / 4) * 2)
.attr("y", -chart.dimensions.margin.top + 29)
.on("click", function() {
@@ -3010,7 +3010,7 @@ function build_chart(chart) {
.data([chart])
.enter()
.append("text")
- .classed("actionlabel middletext", true)
+ .classed("actionlabel middletext showGraph", true)
.attr("x", (chart.dimensions.viewport_width / 4) * 3 - 40)
.attr("y", -chart.dimensions.margin.top + 29)
.text("Show");
@@ -3027,7 +3027,7 @@ function build_chart(chart) {
.data([chart])
.enter()
.append("text")
- .classed("actionlabel middletext", true)
+ .classed("actionlabel middletext hideGraph", true)
.attr("x", (chart.dimensions.viewport_width / 4) * 3 + 11)
.attr("y", -chart.dimensions.margin.top + 29)
.text("Hide");
@@ -3109,7 +3109,8 @@ function build_chart(chart) {
create_download(chart.chart_title + ".csv", "text/csv", "utf-8", string);
})
- .text("Export Data as CSV");
+ .text("Export Data as CSV")
+ .attr("id","csvdown");
chart.chart.container
.append("text")
@@ -3647,7 +3648,9 @@ function load_datasets(chart) {
if (chart.datasets.all.length > chart.dataset_count) {
console.log('Resizing SVG for chart "' + chart.chart_title + '".');
- chart.chart.svg.attr("height", get_svg_height(chart));
+ chart.chart.svg.attr("height", get_svg_height(chart))
+ .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+ chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
console.log('...finished resizing SVG for chart "' + chart.chart_title + '".');
}
@@ -3701,6 +3704,9 @@ exports.create_jschart = function(
stacked = 0;
}
+ d3.select('#'+location)
+ .style("display","flex")
+
// add an entry to the chart generating queue
charts_queue.defer(
generate_chart,
@@ -3717,6 +3723,9 @@ exports.create_jschart = function(
exports.finish_page = function () {
// wait for initial chart generation to complete before logging that it is done and changing the page background
// note: chart datasets may still be loading asynchronously
+ d3.selectAll(".svg")
+ .style("width",'100%')
+ .style("height","auto")
charts_queue.await(function(error, results) {
d3.select("body").classed("completedpage", true);
console.log("Finished creating all charts");
@@ -5374,7 +5383,9 @@ function reset_chart(chart) {
reset_axes_domains(chart);
- chart.chart.svg.attr("height", get_svg_height(chart));
+ chart.chart.svg.attr("height", get_svg_height(chart))
+ .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+ chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
chart.state.reset = true;
}
@@ -5385,7 +5396,7 @@ function get_svg_height(chart) {
chart.dimensions.margin.bottom +
( Math.ceil(chart.datasets.all.length / chart.state.legend_columns) -
1 + chart.options.legend_entries.length
- ) * chart.dimensions.legend_properties.row_height;
+ ) * chart.dimensions.legend_properties.row_height;
}
function reload_chart(chart) {
diff --git a/tests/package.json b/tests/package.json
index 7ee4f09..aa7fba6 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -15,7 +15,13 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
+ "test": "jest --config=testconfig.json ",
+ "debug": "NODE_ENV=debug npm test",
"eject": "react-scripts eject"
+ },
+ "devDependencies": {
+ "jest": "^24.8.0",
+ "jest-cli": "^24.8.0",
+ "puppeteer": "^1.18.1"
}
}
diff --git a/tests/src/App.js b/tests/src/App.js
index f17154a..4b7f42e 100644
--- a/tests/src/App.js
+++ b/tests/src/App.js
@@ -141,11 +141,13 @@ class App extends Component {
JSChart Demos
-
+
- Dynamic Chart Dataset Selection:
-
-
+ Dynamic Chart Dataset Selection:
+
+
+
+
diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js
new file mode 100644
index 0000000..70a065d
--- /dev/null
+++ b/tests/src/e2e/main.test.js
@@ -0,0 +1,92 @@
+const puppeteer = require('puppeteer')
+
+const isDebugging = () => {
+ const debugging_mode = {
+ headless: false,
+ slowMo: 250,
+ devtools: true,
+ }
+ return process.env.NODE_ENV === 'debug' ? debugging_mode : {}
+}
+
+let browser
+let page
+beforeAll(async () => {
+ browser = await puppeteer.launch(isDebugging())
+ page = await browser.newPage()
+ await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' })
+ page.setViewport({ width: 500, height: 2400 })
+
+})
+
+describe('on page load', () => {
+ test('h1 loads correctly', async () => {
+
+ const html = await page.$eval('.App-title', e =>
+ e.innerHTML)
+
+ expect(html).toBe('JSChart Demos')
+
+ }, 16000)
+
+ test('dataset selection', async () => {
+ await page.waitForSelector('div > h3 > select');
+ const availDataset = ['Null', 'Dataset 1', 'Dataset 2']
+ let datasetNo = await page.$eval('div > h3 > select', node => node.innerText);
+ datasetNo = datasetNo.split('\n')
+ expect(datasetNo).toEqual(availDataset);
+ });
+ test(
+ 'should show SVGs', async () => {
+ const divisions = ['jschart_dynamic', 'jschart_json', 'jschart_histogram', 'jschart_timeseries',
+ 'jschart_xy', 'jschart_jitter', 'jschart_jitter_scatter'];
+
+ for (let divLocation of divisions) {
+ await page.waitForSelector(`#${divLocation} > table `, { visible: true });
+ await page.waitForSelector(`#${divLocation} > table > tr > td > svg `, { visible: true });
+ }
+ },
+ 30000
+ );
+ test('should download CSV on click', async () => {
+ await page.waitForSelector('text[id="csvdown"]', { visible: true });
+ await page.click('text[id="csvdown"]');
+ })
+ test('should download PNG on click', async () => {
+ await page.$$eval('.savePNG', elem => {
+ if (elem.innerText === 'Save as PNG') {
+ return elem.click();
+ }
+ return elem;
+ });
+ })
+ test('should show graph', async () => {
+ await page.$$eval('.showGraph', elem => {
+ if (elem.innerText === 'Show') {
+ return elem.click();
+ }
+ return elem;
+ });
+ })
+ test('should hide graph', async () => {
+ await page.$$eval('.hideGraph', elem => {
+ if (elem.innerText === 'Hide') {
+ return elem.click();
+ }
+ return elem;
+ });
+ })
+ test('should reset Zoom/Pan of graph', async () => {
+ await page.$$eval('.reset', elem => {
+ if (elem.innerText === 'Reset Zoom/Pan') {
+ return elem.click();
+ }
+ return elem;
+ });
+ })
+})
+afterAll(() => {
+ if (isDebugging()) {
+ browser.close()
+ }
+})
\ No newline at end of file
diff --git a/tests/testconfig.json b/tests/testconfig.json
new file mode 100644
index 0000000..6b6940f
--- /dev/null
+++ b/tests/testconfig.json
@@ -0,0 +1,4 @@
+{
+ "testEnvironment": "node"
+}
+