Skip to content

Commit

Permalink
feat(treemap): Intent to ship treemap type
Browse files Browse the repository at this point in the history 
feat(treemap): Intent to ship treemap type

Implement Treemap chart type

Close #123
Fix #3002
Fix #3004 
Fix #3006 
Fix #3007 
Fix #3008
  • Loading branch information
@netil
netil authored Dec 29, 2022
1 parent 337c7cb commit 9809ef1
Show file tree
Hide file tree
Showing 60 changed files with 1,741 additions and 830 deletions.
2 changes: 1 addition & 1 deletion demo/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ var billboardDemo = {

// UMD
code.data = code.data.join("")
.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|gauge|line|pie|polar|radar|scatter|spline|step|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|gauge|line|pie|polar|radar|scatter|spline|step|treemap|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
var module = camelize(p1);

code.esm.indexOf(module) === -1 &&
Expand Down
122 changes: 121 additions & 1 deletion demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -954,7 +954,127 @@ var demos = {
}, 1000)
];
}
}
},
TreemapChart: [
{
options: {
title: {
text: "'binary' tile",
},
padding: {
top: 10,
bottom: 15
},
data: {
columns: [
["data1", 1300],
["data2", 200],
["data3", 500],
["data4", 50],
["data5", 100],
["data6", 70],
["data7", 200],
["data8", 133],
["data9", 220],
["data10", 15],
],
type: "treemap",
labels: {
colors: "#fff"
}
},
treemap: {
label:{
threshold: 0.03
}
}
},
func: function(chart) {
chart.timer = [
setTimeout(function() {
chart.load({
columns: [
["data4", 1000],
["data5", 280],
],
unload: ["data1"]
});
}, 1500)
];
}
},
{
options: {
title: {
text: "'dice' tile",
},
padding: {
top: 10,
bottom: 15
},
data: {
rows: [
["data1", "data2", "data3", "data4"],
[300, 200, 500, 380]
],
type: "treemap",
order: "asc",
labels: {
colors: {
data1: "red",
data2: "#fff",
data3: "blue",
data4: "purple"
},
centered: true
}
},
tooltip: {
format: {
value: function(value, ratio, id, index) {
return value;
}
}
},
treemap: {
tile: "dice",
label: {
format: function(value, ratio, id) {
return value;
}
}
}
}
},
{
options: {
title: {
text: "'slice' tile",
},
padding: {
top: 10
},
data: {
json: [
{"data1": 250, "data2": 200, "data3": 250, "data4": 150, "data5": 150}
],
keys: {
value: ["data1", "data2", "data3", "data4", "data5"]
},
type: "treemap",
labels: {
centered: true,
colors: "#000",
backgroundColors: "yellow",
},
order: null
},
treemap: {
tile: "slice"
}
}
},
]
},
Axis: {
AdditionalYAxis: {
Expand Down
1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ <h4>Supported chart types</h4>
<li><a href="#Chart.SplineChart">Spline</a></li>
<li><a href="#Chart.StackedBarChart">Stacked Bar</a></li>
<li><a href="#Chart.StepChart">Step</a></li>
<li><a href="#Chart.TreemapChart">Treemap</a></li>
</ul>
</div>
</div>
Expand Down
37 changes: 19 additions & 18 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,30 +91,31 @@
"d3-drag": "^3.0.0",
"d3-dsv": "^3.0.1",
"d3-ease": "^3.0.1",
"d3-hierarchy": "^3.1.2",
"d3-interpolate": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-selection": "^3.0.0",
"d3-shape": "^3.1.0",
"d3-shape": "^3.2.0",
"d3-time-format": "^4.1.0",
"d3-transition": "^3.0.1",
"d3-zoom": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/core": "^7.20.7",
"@babel/eslint-parser": "^7.19.1",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.2",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-transform-runtime": "^7.19.1",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@babel/runtime": "^7.20.6",
"@babel/runtime": "^7.20.7",
"@commitlint/cli": "17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^15.0.0",
"@rollup/plugin-replace": "^5.0.0",
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-typescript": "^10.0.1",
"@semantic-release/changelog": "^6.0.1",
"@semantic-release/changelog": "^6.0.2",
"@semantic-release/commit-analyzer": "^9.0.2",
"@semantic-release/exec": "^6.0.3",
"@semantic-release/git": "^10.0.1",
Expand All @@ -124,8 +125,8 @@
"@types/d3": "^7.4.0",
"@types/mocha": "^10.0.1",
"@types/sinon": "^10.0.13",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"@typescript-eslint/eslint-plugin": "^5.47.1",
"@typescript-eslint/parser": "^5.47.1",
"babel-helper-modules": "^6.0.0",
"babel-loader": "^9.1.0",
"babel-plugin-add-module-exports": "^1.0.4",
Expand All @@ -141,18 +142,18 @@
"chai": "^4.3.7",
"clean-webpack-plugin": "^4.0.0",
"cloc": "^2.10.0",
"core-js": "^3.26.1",
"core-js": "^3.27.0",
"coveralls": "^3.1.1",
"cross-env": "^7.0.3",
"css-loader": "^6.7.2",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"d3-color": "^3.1.0",
"d3-delaunay": "^6.0.2",
"d3-format": "^3.1.0",
"d3-polygon": "^3.0.1",
"docdash": "^2.0.0",
"dtslint": "^4.2.1",
"eslint": "^8.28.0",
"eslint": "^8.30.0",
"eslint-config-naver": "^2.1.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsdoc": "^39.6.4",
Expand All @@ -173,28 +174,28 @@
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^5.0.0",
"lint-staged": "^13.0.4",
"lint-staged": "^13.1.0",
"lite-fixture": "^1.0.2",
"mini-css-extract-plugin": "^2.7.0",
"mocha": "^10.1.0",
"mini-css-extract-plugin": "^2.7.2",
"mocha": "^10.2.0",
"node-sass": "^8.0.0",
"regenerator-runtime": "^0.13.11",
"rollup": "^3.5.0",
"rollup": "^3.9.0",
"rollup-plugin-delete": "^2.0.0",
"sass-loader": "^13.2.0",
"semantic-release": "^19.0.5",
"simulant": "^0.2.2",
"sinon": "^15.0.0",
"sinon": "^15.0.1",
"string-replace-loader": "^3.1.0",
"style-loader": "^3.3.1",
"taffydb": "^2.7.3",
"terser-webpack-plugin": "^5.3.6",
"tslib": "^2.4.1",
"typescript": "4.9.3",
"typescript": "4.9.4",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-clean": "^1.2.5",
"webpack-cli": "^5.0.0",
"webpack-cli": "^5.0.1",
"webpack-common-shake": "^2.1.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0",
Expand Down
1 change: 1 addition & 0 deletions src/Chart/api/legend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
const legend = {
/**
* Show legend for each target.
* - **NOTE:** Legend APIs aren't supported for `treemap` type.
* @function legend․show
* @instance
* @memberof Chart
Expand Down
1 change: 1 addition & 0 deletions src/Chart/api/load.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ export default {
window.requestIdleCallback(() => $$.loadFromArgs(args));
});
} else {
$$.api.tooltip.hide();
$$.loadFromArgs(args);
}
},
Expand Down
13 changes: 11 additions & 2 deletions src/Chart/api/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,13 @@ const tooltip = {
* x: new Date("2018-01-02 00:00")
* });
*
* // treemap type can be shown by using "id" only.
* chart.tooltip.show({
* data: {
* id: "data1" // data id
* }
* });
*
* // when data.xs is used
* chart.tooltip.show({
* data: {
Expand All @@ -61,7 +68,7 @@ const tooltip = {
*/
show: function(args): void {
const $$ = this.internal;
const {config, state: {inputType}} = $$;
const {$el, config, state: {eventReceiver, hasTreemap, inputType}} = $$;
let index;
let mouse;

Expand All @@ -75,7 +82,9 @@ const tooltip = {
const {data} = args;
const y = $$.getYScaleById(data.id)(data.value);

if ($$.isMultipleX()) {
if (hasTreemap && data.id) {
eventReceiver.rect = $el.main.select(`${$$.selectorTarget(data.id, undefined, "rect")}`);
} else if ($$.isMultipleX()) {
// if multiple xs, target point will be determined by mouse
mouse = [$$.scale.x(data.x), y];
} else {
Expand Down
Loading

0 comments on commit 9809ef1

Please sign in to comment.