Skip to content

Commit 0acd49d

Browse files
mkaulmkaul
committed
migrate to V18
1 parent 84f7a87 commit 0acd49d

File tree

6 files changed

+338
-62
lines changed

6 files changed

+338
-62
lines changed

‎histogram/ccm.histogram.js

+41-60
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@
2323
* recommended used framework version
2424
* @type {string}
2525
*/
26-
ccm: 'https://akless.github.io/ccm/version/ccm-11.5.0.min.js',
27-
// ccm: '//akless.github.io/ccm/ccm.js',
26+
ccm: 'https://ccmjs.github.io/ccm/ccm.js',
27+
// ccm: 'https://ccmjs.github.io/ccm/versions/ccm-18.0.4.min.js',
2828

2929
/**
3030
* default instance configuration
3131
* @type {object}
3232
*/
3333
config: {
34-
boxes: {
34+
data: {
3535
"EU": 30,
3636
"US": 70,
3737
"CHN": 50
@@ -46,115 +46,97 @@
4646
}
4747
},
4848
styles: {
49-
"EU": {
50-
fill: "orange",
51-
stroke: "red",
52-
"stroke-width": 3,
53-
"fill-opacity": 0.5
54-
},
55-
"US": {
56-
fill: "lime",
57-
stroke: "purple",
58-
"stroke-width": 3,
59-
"fill-opacity": 0.5
60-
},
61-
"CHN": {
62-
fill: "yellow",
63-
stroke: "orange",
64-
"stroke-width": 3,
65-
"fill-opacity": 0.5
66-
},
49+
"fill": "coral",
6750
"text": {
68-
"font-family": "Verdana",
6951
"font-size": 8
7052
}
71-
},
72-
73-
// css: [ 'ccm.load', '//kaul.inf.h-brs.de/data/ccm/histogram/resources/default.css' ],
53+
}
7454

75-
// css: [ 'ccm.load', 'https://mkaul.github.io/ccm-components/histogram/resources/default.css' ],
76-
// user: [ 'ccm.instance', 'https://akless.github.io/ccm-components/user/versions/ccm.user-2.0.0.min.js' ],
77-
// logger: [ 'ccm.instance', 'https://akless.github.io/ccm-components/log/versions/ccm.log-1.0.0.min.js', [ 'ccm.get', 'https://akless.github.io/ccm-components/log/resources/log_configs.min.js', 'greedy' ] ],
78-
// onfinish: function( instance, results ){ console.log( results ); }
55+
// css: [ 'ccm.load', 'https://ccmjs.github.io/mkaul-components/histogram/resources/default.css' ]
7956
},
8057

8158
/**
8259
* for creating instances of this component
8360
* @constructor
8461
*/
8562
Instance: function () {
86-
63+
64+
"use strict";
65+
8766
/**
8867
* own reference for inner functions
8968
* @type {Instance}
9069
*/
9170
const self = this;
92-
71+
9372
/**
9473
* shortcut to help functions
95-
* @type {Object}
74+
* @type {Object.<string,function>}
9675
*/
9776
let $;
98-
77+
9978
/**
10079
* init is called once after all dependencies are solved and is then deleted
101-
* @param {function} callback - called after all synchronous and asynchronous operations are complete
10280
*/
103-
this.init = callback => {
104-
105-
// Is content given via LightDOM (inner HTML of Custom Element)?
81+
this.init = async () => {
82+
83+
// Is config given via LightDOM (inner HTML of Custom Element)?
10684
// Then use it with higher priority
107-
if ( self.inner && self.inner.innerHTML.trim() ) self.text = self.inner.innerHTML;
108-
109-
// ToDo interprete LightDOM
85+
if ( self.inner && self.inner.innerHTML.trim() ){
86+
87+
// interprete LightDOM
88+
self.lightDOM = JSON.parse( self.inner.innerHTML );
89+
90+
// merge into config
91+
Object.assign( self, self.lightDOM );
92+
93+
}
11094

111-
callback();
11295
};
113-
96+
11497
/**
11598
* is called once after the initialization and is then deleted
116-
* @param {function} callback - called after all synchronous and asynchronous operations are complete
11799
*/
118-
this.ready = callback => {
100+
this.ready = async () => {
119101

120102
// set shortcut to help functions
121103
$ = self.ccm.helper;
122-
123-
callback();
124-
};
125-
104+
105+
};
106+
126107
/**
127108
* starts the instance
128-
* @param {function} [callback] - called after all synchronous and asynchronous operations are complete
129109
*/
130-
this.start = callback => {
110+
this.start = async () => {
131111

132112
// has logger instance? => log 'start' event
133-
if ( self.logger ) self.logger.log( 'start' );
113+
self.logger && self.logger.log( 'start' );
134114

135-
const dimensions = Object.keys( self.boxes );
115+
const dimensions = Object.keys( self.data );
136116
const dim_count = dimensions.length;
137117
let list = self.html.main.inner;
138118

139119
dimensions.map( (dim, index) => {
140120
const width = parseFloat( self.html.main.width ) / dim_count;
141121
const height = parseFloat( self.html.main.height );
142122

123+
const stroke_width = self.styles[ dim ] && self.styles[ dim ]["stroke-width"] || 1;
124+
143125
const rect = { tag: 'rect',
144126
x: index * width,
145-
y: height - self.boxes[ dim ] - self.styles[ dim ]["stroke-width"] || 1,
146-
width: width - self.styles[ dim ]["stroke-width"] || 1,
147-
height: self.boxes[ dim ],
148-
inner: { tag: 'title', inner: dim + ': ' + self.boxes[ dim ] }
127+
y: height - self.data[ dim ] - stroke_width,
128+
width: width - stroke_width,
129+
height: self.data[ dim ],
130+
inner: { tag: 'title', inner: dim + ': ' + self.data[ dim ] }
149131
};
150-
list.push( $.integrate(rect, self.styles[ dim ]) );
132+
list.push( $.integrate(rect, $.integrate( self.styles, self.styles[ dim ])) );
151133
list.push( $.clone( $.integrate( { tag:'text',
152134
x: index * width + 0.5 * width,
153135
y: height - 10,
154136
"text-anchor": "middle",
155137
inner: [
156138
dim,
157-
{ tag: 'title', inner: dim + ': ' + self.boxes[ dim ] }
139+
{ tag: 'title', inner: dim + ': ' + self.data[ dim ] }
158140
]
159141
}, self.styles.text ) ) );
160142
});
@@ -165,10 +147,9 @@
165147
// set content of own website area
166148
$.setContent( self.element, main_elem );
167149

168-
// Hack in order to get SVG rendered inside the shadow root
150+
// Hack in order to get SVG rendered inside the shadow DOM
169151
self.element.innerHTML += '';
170152

171-
if ( callback ) callback();
172153
};
173154

174155
}

‎histogram/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<meta charset="utf-8">
33
<meta name="author" content="Manfred Kaul <[email protected]> 2017">
44
<meta name="license" content="The MIT License (MIT)">
5-
<!--<script src="https://mkaul.github.io/ccm-components/histogram/ccm.histogram.js"></script>-->
5+
<!--<script src="https://ccmjs.github.io/mkaul-components/histogram/ccm.histogram.js"></script>-->
66
<script src="ccm.histogram.js"></script>
7-
<ccm-histogram></ccm-histogram>
7+
<ccm-histogram></ccm-histogram>
8+
<ccm-histogram key='["ccm.get","resources/configs.js","demo"]'></ccm-histogram>
9+
<ccm-histogram key='["ccm.get","resources/configs.js","EU_US_CHN"]'></ccm-histogram>

‎histogram/resources/configs.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
/**
3+
* @overview configs of ccm component plotly
4+
* @author Manfred Kaul <[email protected]> 2018
5+
* @license The MIT License (MIT)
6+
*/
7+
8+
ccm.files[ 'configs.js' ] = {
9+
10+
"demo": {
11+
key: "demo",
12+
13+
data: {
14+
anton: 33,
15+
berta: 23,
16+
caesar: 18,
17+
dora: 50
18+
},
19+
20+
html: {
21+
// size of SVG image
22+
main: {
23+
tag: 'svg',
24+
width:"100",
25+
height:"100",
26+
inner: []
27+
}
28+
},
29+
30+
styles: {
31+
"fill": "coral",
32+
"text": {
33+
"font-size": 8,
34+
"fill": "white"
35+
}
36+
}
37+
},
38+
39+
"EU_US_CHN": {
40+
key: "EU_US_CHN",
41+
42+
data: {
43+
"EU": 30,
44+
"US": 70,
45+
"CHN": 50
46+
},
47+
html: {
48+
// size of SVG image
49+
main: {
50+
tag: 'svg',
51+
width:"100",
52+
height:"100",
53+
inner: []
54+
}
55+
},
56+
styles: {
57+
"EU": {
58+
fill: "orange",
59+
stroke: "red",
60+
"stroke-width": 3,
61+
"fill-opacity": 0.5
62+
},
63+
"US": {
64+
fill: "lime",
65+
stroke: "purple",
66+
"stroke-width": 3,
67+
"fill-opacity": 0.5
68+
},
69+
"CHN": {
70+
fill: "yellow",
71+
stroke: "orange",
72+
"stroke-width": 3,
73+
"fill-opacity": 0.5
74+
},
75+
"text": {
76+
"font-family": "Verdana",
77+
"font-size": 8
78+
}
79+
}
80+
}
81+
82+
};

‎histogram/resources/dms.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"_id": "histogram",
3+
"title": "Histogram",
4+
"icon": "https://ccmjs.github.io/mkaul-components/histogram/resources/icon.svg",
5+
"abstract": "<a href=https://en.wikipedia.org/wiki/Histogram>Histogram</a> in <a href=https://www.w3schools.com/graphics/svg_intro.asp>SVG</a>",
6+
"description": "<a href=https://en.wikipedia.org/wiki/Histogram>Histogram</a> is an accurate representation of the distribution of numerical data. It is an estimate of the probability distribution of a continuous variable (quantitative variable) and was first introduced by Karl Pearson, see <a href=https://en.wikipedia.org/wiki/Histogram>Wikipedia</a>. The histogram is rendered as <a href=https://www.w3schools.com/graphics/svg_intro.asp>SVG</a> graph.",
7+
"url": "https://ccmjs.github.io/mkaul-components/histogram/versions/ccm.histogram-1.0.0.js",
8+
"version": "1.0.0",
9+
"website": "https://ccmjs.github.io/mkaul-components/",
10+
"developer": "Manfred Kaul",
11+
"license": "MIT License",
12+
"ignore": {
13+
"demos": [
14+
{
15+
"title": "demo",
16+
"config": [
17+
"ccm.get",
18+
"https://ccmjs.github.io/mkaul-components/histogram/resources/configs.js",
19+
"demo"
20+
]
21+
},
22+
{
23+
"title": "EU US CHN",
24+
"config": [
25+
"ccm.get",
26+
"https://ccmjs.github.io/mkaul-components/histogram/resources/configs.js",
27+
"EU_US_CHN"
28+
]
29+
}
30+
],
31+
"builder": [
32+
{
33+
"title": "JSON Builder",
34+
"url": "https://ccmjs.github.io/akless-components/app_builder/versions/ccm.app_builder-1.0.0.js",
35+
"config": {
36+
"builder": [
37+
"ccm.component",
38+
"https://ccmjs.github.io/akless-components/json_builder/versions/ccm.json_builder-1.1.0.js",
39+
{
40+
"html.inner.1": "",
41+
"directly": true
42+
}
43+
]
44+
}
45+
}
46+
]
47+
},
48+
"updated_at": "2018-10-12T14:41:22+02:00",
49+
"created_at": "2018-10-12T14:41:22+02:00"
50+
}

‎histogram/resources/icon.svg

+1
Loading

0 commit comments

Comments
 (0)