Skip to content

renaming store property of delite/Store #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

renaming store property of delite/Store #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Migration steps from dojox/treemap to dtreemap:

* replace any use of `"dojox/treemap"` AMD module path by `"dtreemap"`
* replace any use of `.dojoxTreeMapXSomething` CSS classes by `.dtreemap-xsomething`
* replace any use in markup of `<div data-dojo-type="dojox/treemap/TreeMap" data-dojo-props="store: mystore"></div>` by `<d-treemap store="mystore"><d-treemap>`
* replace any use in markup of `<div data-dojo-type="dojox/treemap/TreeMap" data-dojo-props="source: mysource"></div>` by `<d-treemap source="mysource"><d-treemap>`

## Licensing

Expand Down
18 changes: 9 additions & 9 deletions TreeMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,44 +33,44 @@ define(["dcl/dcl", "delite/register", "dcolor/Color",
rootItem: null,

/**
* The attribute of the store item that contains the tooltip text of a treemap cell.
* The attribute of the source item that contains the tooltip text of a treemap cell.
* @member {string}
* @default ""
*/
tooltipAttr: "",

/**
* A function that returns the tooltip text of a treemap cell from a store item. If specified takes
* A function that returns the tooltip text of a treemap cell from a source item. If specified takes
* precedence over tooltipAttr.
* @member {Function}
* @default null
*/
tooltipFunc: null,

/**
* The attribute of the store item that contains the data used to compute the area of a treemap cell.
* The attribute of the source item that contains the data used to compute the area of a treemap cell.
* @member {string}
* @default ""
*/
areaAttr: "",

/**
* A function that returns the value use to compute the area of cell from a store item. If specified
* A function that returns the value use to compute the area of cell from a source item. If specified
* takes precedence over areaAttr.
* @member {Function}
* @default null
*/
areaFunc: null,

/**
* The attribute of the store item that contains the label of a treemap cell.
* The attribute of the source item that contains the label of a treemap cell.
* @member {string}
* @default "label"
*/
labelAttr: "label",

/**
* A function that returns the label of a treemap cell from a store item. If specified takes
* A function that returns the label of a treemap cell from a source item. If specified takes
* precedence over labelAttr.
* @member {Function}
* @default null
Expand All @@ -87,14 +87,14 @@ define(["dcl/dcl", "delite/register", "dcolor/Color",
labelThreshold: NaN,

/**
* The attribute of the store item that contains the data used to compute the color of a treemap cell.
* The attribute of the source item that contains the data used to compute the color of a treemap cell.
* @member {string}
* @default ""
*/
colorAttr: "",

/**
* A function that returns from a store item the data used to compute the color of a treemap cell.
* A function that returns from a source item the data used to compute the color of a treemap cell.
* If specified takes precedence over colorAttr.
* @member {Function}
* @default null
Expand Down Expand Up @@ -135,7 +135,7 @@ define(["dcl/dcl", "delite/register", "dcolor/Color",
},

getIdentity: function (item) {
return item.__treeID ? item.__treeID : this.store.getIdentity(item);
return item.__treeID ? item.__treeID : this.source.getIdentity(item);
},


Expand Down
4 changes: 2 additions & 2 deletions demos/githubIssues/src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,11 @@ function (dcl, request, Color, register, TreeMap, Keyboard, DrillDownUp, Memory,
data[i].title = data[i].title.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;")
.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
var store = new (Memory.createSubclass(Trackable))({data: data});
var source = new (Memory.createSubclass(Trackable))({data: data});
// depending on when we arrive here treemap
// might already been there...
// reset data:
treeMap.store = store;
treeMap.source = source;
}, function () {
console.log("could not reach data source");
});
Expand Down
24 changes: 12 additions & 12 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ An example of a treemap is shown below. The treemap shows business sectors at th

`dtreemap/TreeMap` supports squarified algorithms for two-dimensional treemaps, and is characterized by the ability to:

* Map the size, color, and label of treemap cells to properties in a data store.
* Map the size, color, and label of treemap cells to properties in a data source.
* Choose either a predefined algorithm for computing the item colors or specify a color using a customizable color function.
* Specify the treemap levels at which labels are to appear.
* Get an event when clicking and hovering over treemap items.
Expand All @@ -39,9 +39,9 @@ See [`delite/Widget`](/delite/docs/master/Widget.md) for full details on how ins
### Declarative Instantiation

```js
var dataStore;
var dataSource;
require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], function (register, Memory) {
dataStore = new Memory({idProperty: "label", data:
dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -57,7 +57,7 @@ require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], f

```html
<html>
<d-treemap style="width:640px;height:640px" store="dataStore" areaAttr="sales"
<d-treemap style="width:640px;height:640px" source="dataSource" areaAttr="sales"
colorAttr="profit" tooltipAttr="label" groupAttrs="region">
</d-treemap>
</html>
Expand All @@ -67,7 +67,7 @@ require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], f

```js
require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], function (Memory, TreeMap) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -78,7 +78,7 @@ require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], f
{ label: "China", sales: 500, profit: 40, region: "Asia" },
{ label: "Japan", sales: 900, profit: 100, region: "Asia" }
]});
var treeMap = new TreeMap({store: dataStore, areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"]});
var treeMap = new TreeMap({source: dataSource, areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"]});
treeMap.style.width = "640px";
treeMap.style.height = "480px";
treeMap.placeAt(document.body);
Expand All @@ -91,11 +91,11 @@ require(["dstore/Memory", "dtreemap/TreeMap", "requirejs-domready/domReady!"], f

`dtreemap/TreeMap` can connect to any implementation of `dstore/api/Store` interface that implements the get, filter, map and getIdentity methods. It supports flat data and optionally creates a hierarchy from this data using `groupAttrs`property to group the data based on certain of their attributes.

A set of properties are available on the treemap to map the properties from the store to the treemap properties. see `delite/StoreMap`for details on mapping.
A set of properties are available on the treemap to map the properties from the source to the treemap properties. see `delite/StoreMap`for details on mapping.

#### Mapping using attributes

In this example the data are mapped from the data store using an attribute based mapping. That means the cell size and color as well as the grouping are extracted from attributes values in the data.
In this example the data are mapped from the data source using an attribute based mapping. That means the cell size and color as well as the grouping are extracted from attributes values in the data.

<iframe width="100%" height="300" src="http://jsfiddle.net/ibmjs/jnh79/embedded/" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/jnh79/">checkout the sample on JSFiddle</a></iframe>

Expand All @@ -115,13 +115,13 @@ Other binding attributes are available:
<a name="byfunc"></a>
#### Mapping using functions

In this example the data are mapped from the data store using custom functions. That means the cell size and color as well as the grouping are computed by functions specified by the application.
In this example the data are mapped from the data source using custom functions. That means the cell size and color as well as the grouping are computed by functions specified by the application.

<iframe width="100%" height="300" src="http://jsfiddle.net/ibmjs/TWJ3z/embedded/" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/TWJ3z/">checkout the sample on JSFiddle</a></iframe>

The example is very similar to the previous one, except that it is using a function to compute the input value for the cells color. In this case instead of using the absolute profit figure we are computing the profit percentage.

The example is also leveraging the query attribute that allows to reduce the scope of the query made onto the data store in order to extract a subset of the data. Here we are choosing only data items with sales above a given threshold.
The example is also leveraging the query attribute that allows to reduce the scope of the query made onto the data source in order to extract a subset of the data. Here we are choosing only data items with sales above a given threshold.

Obviously functions are also supported for binding areas, labels or tooltips.

Expand All @@ -135,7 +135,7 @@ In addition to the mapping properties `dtreemap/TreeMap` provides other useful p
* The `selectedItems` property is the array of selected items. If you want to select only a single item you can alternatively used selectedItem property. See `delite/Selection` for details.

```js
var treeMap = new TreeMap({store: dataStore, labelThreshold: 1, selectedItem: dataStore.get("France") ,
var treeMap = new TreeMap({source: dataSource, labelThreshold: 1, selectedItem: dataSource.get("France") ,
areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
colorModel: colorModel });
```
Expand Down Expand Up @@ -292,7 +292,7 @@ require(["requirejs-dplugins/i18!myapp/nls/bundle", …], function(bundle, …)
Right to left orientation is supported by setting the `dir` attribute to `rtl`on the treemap element:

```js
<d-treemap style="width:640px;height:640px" store="dataStore" areaAttr="sales" colorAttr="profit" dir="rtl"></d-treemap>
<d-treemap style="width:640px;height:640px" source="dataSource" areaAttr="sales" colorAttr="profit" dir="rtl"></d-treemap>
```

### Security
Expand Down
4 changes: 2 additions & 2 deletions samples/attr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["dojo/dom", "dtreemap/TreeMap", "dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color",
"requirejs-domready/domReady!"],
function(dom, TreeMap, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -25,7 +25,7 @@
]
});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = new TreeMap({store: dataStore,
var treeMap = new TreeMap({source: dataSource,
areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
colorModel: colorModel });
treeMap.style.width = "640px";
Expand Down
4 changes: 2 additions & 2 deletions samples/drilldown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["dojo/dom", "delite/register", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "dtreemap/DrillDownUp", "requirejs-domready/domReady!"],
function(dom, register, TreeMap, Memory, MeanColorModel, Color, DrillDownUp) {
dataStore = new Memory({idProperty: "label", data:
dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -31,7 +31,7 @@
</script>
</head>
<body>
<c-treemap id="treeMap" style="position: absolute;top: 40px; width:640px;height:640px" store="dataStore" areaAttr="sales" colorAttr="profit" tooltipAttr="label"
<c-treemap id="treeMap" style="position: absolute;top: 40px; width:640px;height:640px" source="dataSource" areaAttr="sales" colorAttr="profit" tooltipAttr="label"
groupAttrs="region" colorModel="colorModel"></c-treemap>
</body>
</html>
4 changes: 2 additions & 2 deletions samples/event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["dojo/dom", "dtreemap/TreeMap", "dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color",
"requirejs-domready/domReady!"],
function(dom, TreeMap, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -25,7 +25,7 @@
]
});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = new TreeMap({store: dataStore,
var treeMap = new TreeMap({source: dataSource,
areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
colorModel: colorModel });
treeMap.on("selection-change", function(e){
Expand Down
4 changes: 2 additions & 2 deletions samples/func.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["dojo/dom", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "requirejs-domready/domReady!"],
function(dom, TreeMap, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -25,7 +25,7 @@
]
});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = new TreeMap({store: dataStore,
var treeMap = new TreeMap({source: dataSource,
areaAttr: "sales",
colorFunc: function(item){
// use benefit % instead of absolute profit
Expand Down
4 changes: 2 additions & 2 deletions samples/grouplabel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["delite/register", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "dtreemap/GroupLabel", "requirejs-domready/domReady!"],
function(register, TreeMap, Memory, MeanColorModel, Color, GroupLabel) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -27,7 +27,7 @@
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
register("c-treemap", [TreeMap, GroupLabel]);
register.deliver();
treeMap.store = dataStore;
treeMap.source = dataSource;
treeMap.areaAttr = "sales";
treeMap.colorAttr = "profit";
treeMap.tooltipAttr = "label";
Expand Down
4 changes: 2 additions & 2 deletions samples/key.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["delite/register", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "dtreemap/Keyboard", "requirejs-domready/domReady!"],
function(register, TreeMap, Memory, MeanColorModel, Color, Keyboard) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -28,7 +28,7 @@
var treeMap = new (register("c-treemap", [TreeMap, Keyboard]))();
treeMap.style.width = "640px";
treeMap.style.height = "640px";
treeMap.store = dataStore;
treeMap.source = dataSource;
treeMap.areaAttr = "sales";
treeMap.colorAttr = "profit";
treeMap.tooltipAttr = "label";
Expand Down
4 changes: 2 additions & 2 deletions samples/props.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["dojo/dom", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "requirejs-domready/domReady!"],
function(dom, TreeMap, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -25,7 +25,7 @@
]
});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = new TreeMap({store: dataStore, labelThreshold: 1, selectedItem: dataStore.get("France") ,
var treeMap = new TreeMap({source: dataSource, labelThreshold: 1, selectedItem: dataSource.get("France") ,
areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
colorModel: colorModel });
treeMap.style.width = "640px";
Expand Down
4 changes: 2 additions & 2 deletions samples/scaledlabel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
require(["delite/register", "dtreemap/TreeMap",
"dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "dtreemap/ScaledLabel", "requirejs-domready/domReady!"],
function(register, TreeMap, Memory, MeanColorModel, Color, ScaledLabel) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -27,7 +27,7 @@
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
register("c-treemap", [TreeMap, ScaledLabel]);
register.deliver();
treeMap.store = dataStore;
treeMap.source = dataSource;
treeMap.areaAttr = "sales";
treeMap.colorAttr = "profit";
treeMap.tooltipAttr = "label";
Expand Down
4 changes: 2 additions & 2 deletions samples/style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

require(["dtreemap/TreeMap", "dstore/Memory", "dcolor/MeanColorModel", "dcolor/Color", "requirejs-domready/domReady!"],
function(TreeMap, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
var dataSource = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -47,7 +47,7 @@
]
});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = new TreeMap({store: dataStore,
var treeMap = new TreeMap({source: dataSource,
areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
colorModel: colorModel });
treeMap.style.width = "640px";
Expand Down
6 changes: 3 additions & 3 deletions tests/unit/Attr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ define([
"dcolor/MeanColorModel",
"dcolor/Color"
], function (registerSuite, assert, register, TreeMap, Memory, MeanColorModel, Color) {
var container, store;
var container, source;
registerSuite({
name: "Attr",
setup: function () {
container = document.createElement("div");
document.body.appendChild(container);
store = new Memory({idProperty: "label", data:
source = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
Expand All @@ -30,7 +30,7 @@ define([
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
var treeMap = register.createElement("d-treemap");
treeMap.style.height = "480px";
treeMap.store = store;
treeMap.source = source;
treeMap.areaAttr = "sales";
treeMap.colorAttr = "profit";
treeMap.groupAttrs = ["region"];
Expand Down