Skip to content

Commit

Permalink
fix: show axis options.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesleesaunders
jamesleesaunders committed May 22, 2024
1 parent 026a977 commit 79e48b6
Show file tree
Hide file tree
Showing 17 changed files with 245 additions and 147 deletions.
183 changes: 110 additions & 73 deletions dist/d3-ez.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/d3-ez.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/d3-ez.zip
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "d3-ez",
"version": "4.0.3",
"version": "4.0.4",
"description": "D3 Easy Reusable Chart Library",
"license": "GPL-2.0",
"keywords": [
Expand Down
31 changes: 25 additions & 6 deletions src/chart/barChartCircular.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function() {
const titleH = title ? 40 : 0;
const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100);
const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100);
const radius = Math.min(chartW, chartH) / 2.3;
const radius = (Math.min(chartW, chartH) / data.length) / 2.3;
const innerRadius = radius / 4;

const { columnKeys, valueMax } = dataTransform(data).summary();
Expand Down Expand Up @@ -116,7 +116,7 @@ export default function() {
const legendSelect = svg.select(".legend");

// Update the chart dimensions and layer groups
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"];
const chartLayers = ["axis", "seriesGroup"];
chartSelect.classed(classed, true)
.attr("width", chartW)
.attr("height", chartH)
Expand Down Expand Up @@ -162,14 +162,33 @@ export default function() {
.classed("series", true)
.merge(series)
.attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`)
.call(componentCircularAxis)
.call(componentBarsCircular)
.call(componentCircularSectorLabels)
.call(componentCircularRingLabels);

series.exit()
.remove();

// Axis Labels
if (showAxis) {
const seriesAxis = chartSelect.select(".axis")
.selectAll(".seriesAxis")
.data(data);

seriesAxis.enter()
.append("g")
.classed("seriesAxis", true)
.merge(seriesAxis)
.attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`)
.call(componentCircularAxis)
.call(componentCircularSectorLabels);

seriesAxis.exit()
.remove();
} else {
chartSelect.selectAll(".axis").selectAll('*').remove();
}


// Title
if (title) {
const componentTitle = component.title()
Expand All @@ -179,7 +198,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -194,7 +213,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
12 changes: 6 additions & 6 deletions src/chart/barChartHorizontal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function() {
let classed = "barChart";
let width = 700;
let height = 400;
let margin = { top: 40, right: 40, bottom: 40, left: 40 };
let margin = { top: 40, right: 40, bottom: 70, left: 70 };
let colors = palette.categorical(1);
let transition = { ease: d3.easeLinear, duration: 0 };
let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
Expand Down Expand Up @@ -105,7 +105,7 @@ export default function() {
const legendSelect = svg.select(".legend");

// Update the chart dimensions and layer groups
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"];
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"];
chartSelect.classed(classed, true)
.attr("width", chartW)
.attr("height", chartH)
Expand Down Expand Up @@ -141,15 +141,15 @@ export default function() {
.remove();

// Axis
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale2);
if (showAxis) {
// X-Axis
const xAxis = d3.axisBottom(xScale);
chartSelect.select(".xAxis")
.attr("transform", `translate(0,${chartH})`)
.call(xAxis);

// Y-Axis
const yAxis = d3.axisLeft(yScale2);
chartSelect.select(".yAxis")
.call(yAxis);
} else {
Expand All @@ -165,7 +165,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -180,7 +180,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
12 changes: 6 additions & 6 deletions src/chart/barChartVertical.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function() {
let classed = "barChart";
let width = 700;
let height = 400;
let margin = { top: 40, right: 40, bottom: 40, left: 40 };
let margin = { top: 40, right: 40, bottom: 70, left: 70 };
let colors = palette.categorical(1);
let transition = { ease: d3.easeLinear, duration: 0 };
let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
Expand Down Expand Up @@ -105,7 +105,7 @@ export default function() {
const legendSelect = svg.select(".legend");

// Update the chart dimensions and layer groups
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"];
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"];
chartSelect.classed(classed, true)
.attr("width", chartW)
.attr("height", chartH)
Expand Down Expand Up @@ -140,15 +140,15 @@ export default function() {
.remove();

// Axis
const xAxis = d3.axisBottom(xScale2);
const yAxis = d3.axisLeft(yScale);
if (showAxis) {
// X-Axis
const xAxis = d3.axisBottom(xScale2);
chartSelect.select(".xAxis")
.attr("transform", `translate(0,${chartH})`)
.call(xAxis);

// Y-Axis
const yAxis = d3.axisLeft(yScale);
chartSelect.select(".yAxis")
.call(yAxis);

Expand Down Expand Up @@ -179,7 +179,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -194,7 +194,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
6 changes: 3 additions & 3 deletions src/chart/bubbleChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function() {
let classed = "bubbleChart";
let width = 700;
let height = 400;
let margin = { top: 40, right: 40, bottom: 40, left: 40 };
let margin = { top: 40, right: 40, bottom: 70, left: 70 };
let colors = palette.categorical(1);
let transition = { ease: d3.easeLinear, duration: 0 };
let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
Expand Down Expand Up @@ -230,7 +230,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -246,7 +246,7 @@ export default function() {
.call(componentLegend);

} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
10 changes: 5 additions & 5 deletions src/chart/candlestickChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function() {
let classed = "candlestickChart";
let width = 700;
let height = 400;
let margin = { top: 40, right: 40, bottom: 40, left: 40 };
let margin = { top: 40, right: 40, bottom: 70, left: 70 };
let colors = ["green", "red"];
let transition = { ease: d3.easeLinear, duration: 0 };
let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
Expand Down Expand Up @@ -143,9 +143,10 @@ export default function() {
.remove();

// Axis
const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%d-%b-%y"));
const yAxis = d3.axisLeft(yScale);
if (showAxis) {
// X Axis
const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%d-%b-%y"));
chartSelect.select(".xAxis")
.attr("transform", `translate(0,${chartH})`)
.call(xAxis)
Expand All @@ -156,7 +157,6 @@ export default function() {
.attr("transform", "rotate(-65)");

// Y-Axis
const yAxis = d3.axisLeft(yScale);
chartSelect.select(".yAxis")
.call(yAxis);

Expand Down Expand Up @@ -204,7 +204,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.selectAll(".title").selectAll('*').remove();
titleSelect.selectAll('*').remove();
}

// Legend
Expand All @@ -219,7 +219,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
28 changes: 23 additions & 5 deletions src/chart/donutChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default function() {
const legendSelect = svg.select(".legend");

// Update the chart dimensions and layer groups
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"];
const chartLayers = ["seriesGroup", "axis"];
chartSelect.classed(classed, true)
.attr("width", chartW)
.attr("height", chartH)
Expand Down Expand Up @@ -151,12 +151,30 @@ export default function() {
.classed("series", true)
.merge(series)
.attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`)
.call(componentDonut)
.call(componentDonutLabels);
.call(componentDonut);

series.exit()
.remove();

// Axis Labels
if (showAxis) {
const seriesAxis = chartSelect.select(".axis")
.selectAll(".seriesAxis")
.data(data);

seriesAxis.enter()
.append("g")
.classed("seriesAxis", true)
.merge(seriesAxis)
.attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`)
.call(componentDonutLabels);

seriesAxis.exit()
.remove();
} else {
chartSelect.selectAll(".axis").selectAll('*').remove();
}

// Title
if (title) {
const componentTitle = component.title()
Expand All @@ -166,7 +184,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -181,7 +199,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
15 changes: 8 additions & 7 deletions src/chart/heatMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function() {
let classed = "heatMap";
let width = 700;
let height = 400;
let margin = { top: 40, right: 40, bottom: 40, left: 40 };
let margin = { top: 40, right: 40, bottom: 70, left: 70 };
let colors = palette.diverging(2).slice(0, 5);
let transition = { ease: d3.easeLinear, duration: 0 };
let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
Expand Down Expand Up @@ -94,7 +94,7 @@ export default function() {
const legendSelect = svg.select(".legend");

// Update the chart dimensions and layer groups
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"];
const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"];
chartSelect.classed(classed, true)
.attr("width", chartW)
.attr("height", chartH)
Expand Down Expand Up @@ -130,19 +130,20 @@ export default function() {
.remove();

// Axis
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
if (showAxis) {
// X-Axis
const xAxis = d3.axisTop(xScale);
chartSelect.select(".xAxis")
.attr("transform", `translate(0,${chartH})`)
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", -8)
.attr("transform", "rotate(60)")
.attr("transform", "rotate(300)")
.style("text-anchor", "end");

// Y-Axis
const yAxis = d3.axisLeft(yScale);
chartSelect.select(".yAxis")
.call(yAxis);
} else {
Expand All @@ -158,7 +159,7 @@ export default function() {
titleSelect.attr("transform", `translate(${width / 2},${margin.top})`)
.call(componentTitle);
} else {
titleSelect.remove();
titleSelect.selectAll("*").remove();
}

// Legend
Expand All @@ -172,7 +173,7 @@ export default function() {
legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`)
.call(componentLegend);
} else {
legendSelect.remove();
legendSelect.selectAll("*").remove();
}
});
}
Expand Down
Loading

0 comments on commit 79e48b6

Please sign in to comment.