From 45d473cde351e098da7404f1bc2e5e95b6eb6514 Mon Sep 17 00:00:00 2001 From: Martin Hecher Date: Mon, 16 May 2016 10:05:19 +0100 Subject: [PATCH 01/14] changed component name --- components/schedule/src/js/schedule.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/schedule/src/js/schedule.js b/components/schedule/src/js/schedule.js index d303589..daffb4b 100644 --- a/components/schedule/src/js/schedule.js +++ b/components/schedule/src/js/schedule.js @@ -1,6 +1,6 @@ import { D3 as RedsiftD3 } from '../../../core/src/js/d3/index'; -class RedsiftRadialChart { +class RedsiftSchedule { constructor(el) { this.$el = el; } @@ -13,4 +13,4 @@ class RedsiftRadialChart { } } -export default RedsiftRadialChart; +export default RedsiftSchedule; From e5844ed40a77768ea45257b9f119e5855e32c0bc Mon Sep 17 00:00:00 2001 From: Martin Hecher Date: Mon, 16 May 2016 10:34:55 +0100 Subject: [PATCH 02/14] removed 'sdk' bundle --- bundles/core/index.js | 3 +- bundles/core/redsift-dark.styl | 4 +- bundles/core/redsift-light.styl | 6 +- bundles/core/redsift-xtra.styl | 2 +- bundles/sdk/index.js | 1 - components/core/index.import.styl | 66 --- components/core/index.js | 12 - components/core/src/js/color/index.js | 109 ----- components/core/src/js/d3/components.js | 421 ------------------ components/core/src/js/d3/index.js | 41 -- components/core/src/js/d3/legendChart.js | 73 --- components/core/src/js/d3/matrix.js | 171 ------- components/core/src/js/d3/pieChart.js | 90 ---- components/core/src/js/d3/radialChart.js | 390 ---------------- components/core/src/js/d3/scheduleChart.js | 246 ---------- components/core/src/js/d3/tools.js | 236 ---------- components/core/src/js/d3/tspanWrap.js | 92 ---- .../core/src/js/feature-detection/index.js | 9 - .../core/src/js/feature-detection/webp.js | 24 - components/core/src/js/lang/index.js | 48 -- components/core/src/js/scroll/index.js | 249 ----------- components/core/src/js/timing/index.js | 28 -- components/core/src/js/treo-writer/index.js | 147 ------ components/core/src/js/widgets/index.js | 2 - components/core/src/js/widgets/sliders.js | 43 -- .../core/src/js/widgets/style-switcher.js | 31 -- components/core/src/js/xkcd/index.js | 101 ----- components/core/src/styles/brand.import.styl | 4 - .../src/styles/common/animation.import.styl | 21 - .../core/src/styles/common/base.import.styl | 11 - .../src/styles/common/breakpoints.import.styl | 15 - .../core/src/styles/common/fonts.import.styl | 86 ---- .../src/styles/common/patterns.import.styl | 16 - .../core/src/styles/common/reset.import.styl | 14 - .../src/styles/common/selection.import.styl | 11 - .../core/src/styles/common/types.import.styl | 74 --- .../src/styles/components/colour.import.styl | 80 ---- .../styles/components/d3-legend.import.styl | 0 .../core/src/styles/components/d3.import.styl | 40 -- .../src/styles/components/inputs.import.styl | 112 ----- .../src/styles/components/sliders.import.styl | 95 ---- .../components/style-switcher.import.styl | 31 -- .../src/styles/components/widgets.import.styl | 43 -- .../src/styles/components/xkcd.import.styl | 34 -- .../core/src/styles/layout/cloud/.gitkeep | 0 .../src/styles/layout/sift-fullsreen/.gitkeep | 0 .../core/src/styles/lib/cards.import.styl | 18 - .../core/src/styles/lib/gradients.import.styl | 7 - .../core/src/styles/lib/images.import.styl | 140 ------ .../core/src/styles/lib/rupture.import.styl | 262 ----------- .../core/src/styles/lib/type.import.styl | 51 --- components/core/src/styles/redsift-base.styl | 26 -- components/core/src/styles/redsift-light.styl | 19 - components/core/src/styles/redsift.styl | 67 --- components/hero/src/styles/index.import.styl | 6 +- package.json | 1 + redsift-ui.config.js | 20 +- 57 files changed, 17 insertions(+), 3932 deletions(-) delete mode 100644 bundles/sdk/index.js delete mode 100644 components/core/index.import.styl delete mode 100644 components/core/index.js delete mode 100644 components/core/src/js/color/index.js delete mode 100644 components/core/src/js/d3/components.js delete mode 100644 components/core/src/js/d3/index.js delete mode 100644 components/core/src/js/d3/legendChart.js delete mode 100644 components/core/src/js/d3/matrix.js delete mode 100644 components/core/src/js/d3/pieChart.js delete mode 100644 components/core/src/js/d3/radialChart.js delete mode 100644 components/core/src/js/d3/scheduleChart.js delete mode 100644 components/core/src/js/d3/tools.js delete mode 100644 components/core/src/js/d3/tspanWrap.js delete mode 100644 components/core/src/js/feature-detection/index.js delete mode 100644 components/core/src/js/feature-detection/webp.js delete mode 100644 components/core/src/js/lang/index.js delete mode 100644 components/core/src/js/scroll/index.js delete mode 100644 components/core/src/js/timing/index.js delete mode 100644 components/core/src/js/treo-writer/index.js delete mode 100644 components/core/src/js/widgets/index.js delete mode 100644 components/core/src/js/widgets/sliders.js delete mode 100644 components/core/src/js/widgets/style-switcher.js delete mode 100644 components/core/src/js/xkcd/index.js delete mode 100644 components/core/src/styles/brand.import.styl delete mode 100644 components/core/src/styles/common/animation.import.styl delete mode 100644 components/core/src/styles/common/base.import.styl delete mode 100644 components/core/src/styles/common/breakpoints.import.styl delete mode 100644 components/core/src/styles/common/fonts.import.styl delete mode 100644 components/core/src/styles/common/patterns.import.styl delete mode 100644 components/core/src/styles/common/reset.import.styl delete mode 100644 components/core/src/styles/common/selection.import.styl delete mode 100644 components/core/src/styles/common/types.import.styl delete mode 100644 components/core/src/styles/components/colour.import.styl delete mode 100644 components/core/src/styles/components/d3-legend.import.styl delete mode 100644 components/core/src/styles/components/d3.import.styl delete mode 100644 components/core/src/styles/components/inputs.import.styl delete mode 100644 components/core/src/styles/components/sliders.import.styl delete mode 100644 components/core/src/styles/components/style-switcher.import.styl delete mode 100644 components/core/src/styles/components/widgets.import.styl delete mode 100644 components/core/src/styles/components/xkcd.import.styl delete mode 100644 components/core/src/styles/layout/cloud/.gitkeep delete mode 100644 components/core/src/styles/layout/sift-fullsreen/.gitkeep delete mode 100644 components/core/src/styles/lib/cards.import.styl delete mode 100644 components/core/src/styles/lib/gradients.import.styl delete mode 100644 components/core/src/styles/lib/images.import.styl delete mode 100644 components/core/src/styles/lib/rupture.import.styl delete mode 100644 components/core/src/styles/lib/type.import.styl delete mode 100644 components/core/src/styles/redsift-base.styl delete mode 100644 components/core/src/styles/redsift-light.styl delete mode 100644 components/core/src/styles/redsift.styl diff --git a/bundles/core/index.js b/bundles/core/index.js index e41a5cb..ae5dcf8 100644 --- a/bundles/core/index.js +++ b/bundles/core/index.js @@ -1,2 +1,3 @@ -export * from '../../components/core/index.js'; +// export * from '../../components/core/index.js'; +export * from '@redsift/ui-rs-core'; export { html } from '@redsift/d3-rs-svg'; diff --git a/bundles/core/redsift-dark.styl b/bundles/core/redsift-dark.styl index 0f81494..3338e7e 100644 --- a/bundles/core/redsift-dark.styl +++ b/bundles/core/redsift-dark.styl @@ -1,5 +1,5 @@ -@import '../../components/core/index.import'; -@import '../../components/core/src/styles/brand.import'; +@import '../../node_modules/@redsift/ui-rs-core/src/index.import'; +@import '../../node_modules/@redsift/ui-rs-core/src/styles/brand.import'; $textColour = $brandWhite; $lineColour = $brandWhite; diff --git a/bundles/core/redsift-light.styl b/bundles/core/redsift-light.styl index da1e755..ad0893a 100644 --- a/bundles/core/redsift-light.styl +++ b/bundles/core/redsift-light.styl @@ -1,5 +1,7 @@ -@import '../../components/core/index.import'; -@import '../../components/core/src/styles/brand.import'; +// @import '../../components/core/index.import'; +// @import '../../components/core/src/styles/brand.import'; +@import '../../node_modules/@redsift/ui-rs-core/src/index.import'; +@import '../../node_modules/@redsift/ui-rs-core/src/styles/brand.import'; $textColour = $brandBlack; $lineColour = #666; diff --git a/bundles/core/redsift-xtra.styl b/bundles/core/redsift-xtra.styl index 8733494..d0a278c 100644 --- a/bundles/core/redsift-xtra.styl +++ b/bundles/core/redsift-xtra.styl @@ -1,2 +1,2 @@ @import './redsift-light'; -@import '../../components/core/src/styles/components/xkcd.import'; +@import '../../node_modules/@redsift/ui-rs-core/src/styles/components/xkcd.import'; diff --git a/bundles/sdk/index.js b/bundles/sdk/index.js deleted file mode 100644 index 1da2bd7..0000000 --- a/bundles/sdk/index.js +++ /dev/null @@ -1 +0,0 @@ -export { ColorTools as default } from '../../components/core/src/js/color/index'; diff --git a/components/core/index.import.styl b/components/core/index.import.styl deleted file mode 100644 index 9a9127d..0000000 --- a/components/core/index.import.styl +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Style setup for redsift-ui based sifts. - * - * - Provides: - * . ready-to-use UI components - * . responsive type system - * . breakpoint setup (via 'rupture') - * . common functionality like reset, patterns and fonts - * - * - Used by: - * . redsift-light - * . redsift-dark - * - * - Folder structure: - * - * ./lib -> mixin and function library - * ./common -> CSS setup and common classes - * ./components -> UI components - */ - -/* - * Mixin/functions library - * - * Common mixins and functions used by redsift-ui. - */ -@import './src/styles/lib/cards.import' -@import './src/styles/lib/gradients.import' - -/* - * Base configuration and common classes: - * - * CSS base setup and common CSS classes. - */ -@import './src/styles/common/reset.import' -@import './src/styles/common/fonts.import' -@import './src/styles/common/patterns.import' -@import './src/styles/common/breakpoints.import' -@import './src/styles/common/selection.import' -@import './src/styles/common/animation.import' -@import './src/styles/common/base.import' -@import './src/styles/common/types.import' - -setup-types() -disable-selection() // FIXXME: only disable on mobile? -create-cards('cards', false) - -/* - * UI components: - * - * Each UI component is encapsulated within a setup function which takes an - * opitional settings hash. If omitted the default settings available in the - * respective component file are used. This allows a (theme) developer to - * customize components for their own sifts and projects. - */ -@import './src/styles/components/inputs.import' -@import './src/styles/components/sliders.import' -@import './src/styles/components/widgets.import' -@import './src/styles/components/colour.import' -@import './src/styles/components/style-switcher.import' -/* FIXXME: refactor into components! */ -@import './src/styles/components/d3.import' - -setup-inputs() -setup-sliders() -setup-widget__down-arrow() -setup-style-switcher() diff --git a/components/core/index.js b/components/core/index.js deleted file mode 100644 index 1c7b71e..0000000 --- a/components/core/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export { FeatureDetection } from './src/js/feature-detection/index'; -export { ColorTools } from './src/js/color/index'; -export { Lang } from './src/js/lang/index'; -export { Scroll } from './src/js/scroll/index'; -export { Timing } from './src/js/timing/index'; -export { TreoWriter } from './src/js/treo-writer/index'; -export { - Sliders, - StyleSwitcher -} from './src/js/widgets/index'; -export { Xkcd } from './src/js/xkcd/index'; -export { D3 } from './src/js/d3/index'; diff --git a/components/core/src/js/color/index.js b/components/core/src/js/color/index.js deleted file mode 100644 index 2568bcc..0000000 --- a/components/core/src/js/color/index.js +++ /dev/null @@ -1,109 +0,0 @@ -// Start: Adapted from https://github.com/MoOx/color-convert -// MIT : https://github.com/MoOx/color-convert/blob/master/LICENSE -// Copyright (c) 2011 Heather Arthur - -function rgb2xyz(rgb) { - let r = rgb[0] / 255, - g = rgb[1] / 255, - b = rgb[2] / 255; - - // assume sRGB - r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92); - g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92); - b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92); - - let x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805); - let y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722); - let z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505); - - return [x * 100, y * 100, z * 100]; -} - -function rgb2lab(rgb) { - let xyz = rgb2xyz(rgb), - x = xyz[0], - y = xyz[1], - z = xyz[2], - l, a, b; - - x /= 95.047; - y /= 100; - z /= 108.883; - - x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116); - y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116); - z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116); - - l = (116 * y) - 16; - a = 500 * (x - y); - b = 200 * (y - z); - - return [l, a, b]; -} - -// End : Adapted from https://github.com/MoOx/color-convert - -function hexToRgb(hex) { - let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, function(m, r, g, b) { - return r + r + g + g + b + b; - }); - - let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - if (!result) { - console.log('Could not parse color', hex); - return [0, 0, 0]; - } - return [ - parseInt(result[1], 16), - parseInt(result[2], 16), - parseInt(result[3], 16) - ]; -} - -const TEXT_WHITE = '#fff'; -const TEXT_BLACK = '#000'; -const BG_RS = ['#ed154f', '#ED1651', '#C82254', '#A62A57', '#842F59', '#842F59', '#35355C', '#231F20']; -const L_TH = 64; - -let ColorTools = { - randomTheme() { - return BG_RS[Math.floor(Math.random() * BG_RS.length)]; - }, - - textColorFor(c) { - if (typeof c === 'string' || c instanceof String) { - c = hexToRgb(c); - } - let lab = rgb2lab(c); - if (lab[0] < L_TH) { - return TEXT_WHITE; - } - return TEXT_BLACK; - }, - - lightnessSort() { - let lab = colors.map(function(c) { - let a = c; - if (!Array.isArray(c)) { - a = hexToRgb(c); - } - - return [rgb2lab(a), c]; - }); - - let sort = lab.sort(function(a, b) { - if (a[0][0] < b[0][0]) return -1; - if (a[0][0] > b[0][0]) return -1; - return 0; - }); - - return sort.map(function(a) { - return a[1]; - }); - }, - - themes: BG_RS -}; - -export { ColorTools }; diff --git a/components/core/src/js/d3/components.js b/components/core/src/js/d3/components.js deleted file mode 100644 index 9790112..0000000 --- a/components/core/src/js/d3/components.js +++ /dev/null @@ -1,421 +0,0 @@ -function angleDeg(x0, y0, x1, y1) { - var dy = y1 - y0; - var dx = x1 - x0; - var theta = Math.atan2(dy, dx); - - return theta * 180/Math.PI; -} - -var Components = { - // .datum([ [2, 3], [2, 10] ]).call(...); - line: function() { - var interpolation = null, - classed = 'line', as = true, ae = true, bgline = null; - - var arrowSize = 12, - arrowAspect = 0.4, - arrowOffset = 6, - xscale = null, yscale = null; - - function impl(selection) { - selection.each(function(data) { - if (data == null) { - console.log('no data for line'); - return; - } - - if (data.length < 2) { - console.log(data.length + ' data items not supported by line'); - return; - } - - if (!Array.isArray(data[0])) { - data = data.map(function (o) { return [ o.x, o.y ]; }); - } - - - if (xscale || yscale) { - if (xscale == null) { - xscale = function (v) { return v; } - } - if (yscale == null) { - yscale = function (v) { return v; } - } - data = data.map(function (o) { - return [ xscale(o[0]), yscale(o[1]) ]; - }); - } - - var x0 = data[0][0]; - var y0 = data[0][1]; - - var x1 = data[data.length - 1][0]; - var y1 = data[data.length - 1][1]; - - var aa = arrowAspect * arrowSize, - o = arrowOffset, - s = arrowSize; - - var line = d3.svg.line(); - if (interpolation != null) { - line = line.interpolate(interpolation); - } - - var el = d3.select(this); - - if (bgline) { - var bg = el.select('.' + bgline); - if (bg.empty()) { - bg = el.append('path').attr('class', 'bgstroke ' + bgline); - } - bg.attr('d', d3.svg.line()(data)); - } - - var p = el.select('.' + classed); - if (p.empty()) { - p = el.append('path').attr('class', classed); - } - - p.attr('d', line(data)); - - var arrow = classed + ' arrow'; - var deg = 0; - - if (as) { - deg = angleDeg(x0, y0, data[1][0], data[1][1]); - - var g = el.select('g.as.' + classed); - if (g.empty()) { - g = el.append('g').attr('class', 'as ' + classed); - } - - var a = g.select('path'); - if (a.empty()) { - a = g.append('path').attr('class', arrow); - } - - g.attr('transform', 'rotate(' + deg + ', ' + x0 + ', ' + y0 + ')'); - a.attr('d', line([[x0 + s - o, y0 + aa], [x0 - o, y0], [x0 + s - o, y0 - aa]])); - } - - if (ae) { - deg = angleDeg(x1, y1, data[data.length - 2][0], data[data.length - 2][1]); - - g = el.select('g.ae.' + classed); - if (g.empty()) { - g = el.append('g').attr('class', 'ae ' + classed); - } - - a = g.select('path'); - if (a.empty()) { - a = g.append('path').attr('class', arrow); - } - - g.attr('transform', 'rotate(' + deg + ', ' + x1 + ', ' + y1 + ')'); - a.attr('d', line([[x1 + s - o, y1 + aa], [x1 - o, y1], [x1 + s - o, y1 - aa]])); - } - - - }); - } - - impl.bgline = function(value) { - if (!arguments.length) return bgline; - bgline = value; - return impl; - }; - - impl.xscale = function(value) { - if (!arguments.length) return xscale; - xscale = value; - return impl; - }; - - impl.yscale = function(value) { - if (!arguments.length) return yscale; - yscale = value; - return impl; - }; - - impl.arrowStart = function(value) { - if (!arguments.length) return as; - as = value; - return impl; - }; - - impl.arrowEnd = function(value) { - if (!arguments.length) return ae; - ae = value; - return impl; - }; - - impl.classed = function(value) { - if (!arguments.length) return classed; - classed = value; - return impl; - }; - - impl.interpolation = function(value) { - if (!arguments.length) return interpolation; - interpolation = value; - return impl; - }; - - return impl; - }, - box: function() { - var interpolation = null, - classed = 'box', baseline = 'hanging', anchor = 'start', - style = null, styleBox = null, styleText = null, bound = false; - - function impl(selection) { - selection.each(function(data) { - if (data === undefined) { - console.log('no data for box'); - return; - } - - var el = d3.select(this); - var p = el.select('path.' + classed); - - if (p.empty()) { - p = el.append('path').attr('class', classed); - } - - if (!Array.isArray(data)) { - // map - if (data.t) { - var t = el.select('text.' + classed); - var magicFix = 1; - if (t.empty()) { - t = el.append('text').attr('class', classed); - // Chrome oddity, to investigate why getBBox is wrong first time by this factor - // could be due to font load? - magicFix = 1; //1.15; - } - // text-anchor - if (anchor !== undefined) t.attr('text-anchor', anchor); - if (baseline !== undefined) t.attr('dominant-baseline', baseline); - - var tx = data.tx || 0; - var ty = data.ty || 0; - - t.attr('x', data.x + tx) - .attr('y', data.y + ty) - .text(data.t); - - if (styleText) { - t.attr('style', styleText); - } else if (style) { - t.attr('style', style); - } - - var boundBox = t.node().getBBox(); - data.width = (data.width === undefined) ? (boundBox.width * magicFix + 2*tx) : data.width; - data.height = (data.height === undefined) ? (boundBox.height + ty) : data.height; - - if (bound) { - data.x = boundBox.x - tx; - data.y = boundBox.y - ty; - } - } - - data = [ [data.x, data.y], [data.x, data.y + data.height], [data.x + data.width, data.y + data.height], [data.x + data.width, data.y], [data.x, data.y] ]; - } else if (data.length < 4) { - console.log(data.length + ' data items not supported by box'); - return; - } - - var box = d3.svg.line(); - if (interpolation != null) { - box = box.interpolate(interpolation); - } - - p.attr('d', box(data)); - if (styleBox) { - p.attr('style', styleBox); - } else if (style) { - p.attr('style', style); - } - }); - } - - // should the box bound the text - impl.bound = function(value) { - if (!arguments.length) return bound; - bound = value; - return impl; - }; - - impl.style = function(value) { - if (!arguments.length) return style; - style = value; - return impl; - }; - - impl.styleBox = function(value) { - if (!arguments.length) return styleBox; - styleBox = value; - return impl; - }; - - impl.styleText = function(value) { - if (!arguments.length) return styleText; - styleText = value; - return impl; - }; - - impl.anchor = function(value) { - if (!arguments.length) return anchor; - anchor = value; - return impl; - }; - - impl.baseline = function(value) { - if (!arguments.length) return baseline; - baseline = value; - return impl; - }; - - impl.classed = function(value) { - if (!arguments.length) return classed; - classed = value; - return impl; - }; - - impl.interpolation = function(value) { - if (!arguments.length) return interpolation; - interpolation = value; - return impl; - }; - - return impl; - }, - spokes: function() { - var radius = 100, - interpolation = null, - classed = 'spokes'; - - function impl(selection) { - selection.each(function(data) { - var seg = d3.svg.line().interpolate(interpolation); - - var p = d3.select(this).selectAll('path.' + classed).data(data); - p.enter().append('path') - .attr('class', classed); - p.exit().remove(); - - p.attr('d', function(d, i) { - var hl = radius; - var hRad = d.startAngle - Math.PI/2; - var hx = hl * Math.cos(hRad); - var hy = hl * Math.sin(hRad); - - var eRad = d.endAngle - Math.PI/2; - var ex = hl * Math.cos(eRad); - var ey = hl * Math.sin(eRad); - - return seg([[ ex, ey ], [ 0, 0 ], [ hx, hy ]]); - }); - - }); - } - - impl.classed = function(value) { - if (!arguments.length) return classed; - classed = value; - return impl; - }; - - impl.radius = function(value) { - if (!arguments.length) return radius; - radius = value; - return impl; - }; - - impl.interpolation = function(value) { - if (!arguments.length) return interpolation; - interpolation = value; - return impl; - }; - - return impl; - }, - radial: function() { - var radius = 100, - interpolation = null, - classed = 'radial', - points = 90, - startAngle = 0, - endAngle = 2*Math.PI; - - function impl(selection) { - selection.each(function() { - - var angle = d3.scale.linear() - .domain([0, points]) - .range([startAngle, endAngle]); - - var line = d3.svg.line.radial() - .interpolate(interpolation) - .radius(radius) - .angle(function(d, i) { return angle(i); }); - - var data = []; - if (points > 0) { - data = [ d3.range(points+1) ]; - - } - var p = d3.select(this).selectAll('path.' + classed).data(data); - - p.enter().append('path') - .attr('class', classed); - p.exit().remove(); - - p.attr('d', function(d) { - return line(d); - }); - }); - } - - impl.startAngle = function(value) { - if (!arguments.length) return startAngle; - startAngle = value; - return impl; - }; - - impl.endAngle = function(value) { - if (!arguments.length) return endAngle; - endAngle = value; - return impl; - }; - - impl.classed = function(value) { - if (!arguments.length) return classed; - classed = value; - return impl; - }; - - impl.points = function(value) { - if (!arguments.length) return points; - points = value; - return impl; - }; - - impl.radius = function(value) { - if (!arguments.length) return radius; - radius = value; - return impl; - }; - - impl.interpolation = function(value) { - if (!arguments.length) return interpolation; - interpolation = value; - return impl; - }; - - return impl; - } -}; - -export { Components }; diff --git a/components/core/src/js/d3/index.js b/components/core/src/js/d3/index.js deleted file mode 100644 index e2140d3..0000000 --- a/components/core/src/js/d3/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Tools } from './tools'; -import { Components } from './components'; - -import { radialChart } from './radialChart'; -import { legendChart } from './legendChart'; -import { pieChart } from './pieChart'; -import { scheduleChart } from './scheduleChart'; -import { matrix } from './matrix'; -import { tspanWrap } from './tspanWrap'; - -let Reusable = { - radialChart: radialChart, - legendChart: legendChart, - pieChart: pieChart, - scheduleChart: scheduleChart, - matrix: matrix, - tspanWrap: tspanWrap -} - -var RedsiftAngle = 33.75; - -let D3 = { - Tools: Tools, - Reusable: Reusable, - Components: Components, - Constants: { - Angle: RedsiftAngle, - Patterns: { - crosshatch1: { ang: 45, w: 4, h: 4, s: 5 }, - crosshatch2: { ang: 45, w: 3, h: 4, s: 5 }, - crosshatch3: { ang: 45, w: 3, h: 3, s: 5 }, - diagonal1: { ang: RedsiftAngle, w: 5, h: 4, s: 5 }, - diagonal2: { ang: RedsiftAngle, w: 5, h: 3, s: 5 }, - diagonal3: { ang: RedsiftAngle, w: 5, h: 2, s: 5 }, - blocks: { ang: 0, w: 3, h: 4, s: 5 }, - redsift: { ang: RedsiftAngle, w: 3, h: 3, s: 5 } - } - } -} - -export { D3 }; diff --git a/components/core/src/js/d3/legendChart.js b/components/core/src/js/d3/legendChart.js deleted file mode 100644 index e3adac8..0000000 --- a/components/core/src/js/d3/legendChart.js +++ /dev/null @@ -1,73 +0,0 @@ -import { Tools } from './tools.js'; - -function legendChart() { - - var width = 300, - height = width, - cpfx = 'd3-lc', - sample = 16, - padding = 4; - - function impl(selection) { - selection.each(function(data) { - var svg = Tools.svgRoot(this, width, height, 'svg-padding-left svg-padding-top'); - - var g = svg.append("g") - .attr('class', cpfx); - - var max = 1; - var mapped = data.map(function(d) { - if (!Array.isArray(d.color)) { - d.color = [ d.color ]; - } else { - max = Math.max(max, d.color.length); - } - return d; - }); - - var line = g.selectAll("g").data(mapped) - .enter() - .append('g') - .attr("transform",function(d,i) { return "translate(0," + (1+i)*(sample+padding) + ")"}) - - var swatch = line.append('g') - .attr("class", function (d) { return 'swatch ' + (d.classed ? d.classed : ''); }); - - var xText = (sample + padding) * max; - - swatch.selectAll("rect") - .data(function(d) { return d.color; }) - .enter().append("rect") - .style('fill', function (d) { return d; }) - .attr("x", function (d, i) { return xText - ((sample+padding) * (i + 1)); }) - .attr("y", -sample + padding) - .attr("width", sample) - .attr("height", sample) - - line.append('text') - .attr('class', 'label') - .attr("x", xText) - .text(function(d) { - return d.title; - }); - }); - } - - impl.width = function(value) { - if (!arguments.length) return width; - width = value; - height = value; - return impl; - }; - - impl.sample = function(value) { - if (!arguments.length) return sample; - sample = value; - return impl; - }; - - return impl; -} - - -export { legendChart }; diff --git a/components/core/src/js/d3/matrix.js b/components/core/src/js/d3/matrix.js deleted file mode 100644 index d241d34..0000000 --- a/components/core/src/js/d3/matrix.js +++ /dev/null @@ -1,171 +0,0 @@ -import { Components } from './components.js'; - -function matrix() { - - var rowClassed = 'row', - columnClassed = 'column', - anchor = 'start', - formatter = function (d) { return d; }, - ty = 0, - tx = 0, - grid = null; - - function impl(selection) { - var sizes = []; - var nodes = []; - - selection.enter().append('g').attr('class', function(d,i) { - var flag = (i%2 === 0) ? ' even' : ' odd'; - - return rowClassed + flag + ' row-' + i; - }); - - selection.exit().remove(); - - selection.each(function(data) { - var cols = d3.select(this).selectAll('.' + columnClassed).data(data); - - cols.enter().append('text').attr('class', function(d,i) { - var flag = (i%2 === 0) ? ' even' : ' odd'; - - return columnClassed + flag + ' column-' + i; - }); - - cols.exit().remove(); - - cols.attr('text-anchor', anchor).attr('dominant-baseline', 'text-before-edge').text(formatter); - var line = []; - var nos = []; - cols.each(function () { - line.push(this.getBBox()); - nos.push(this); - }); - - sizes.push(line); - nodes.push(nos); - }); - - if (grid) { - // Not very d3.... - grid.selectAll('.grid').remove(); - } - - var len = 0; - var maxY = ty; - var rows = sizes.map(function (r) { - if (r && r.length > len) { - len = r.length; - } - var max = d3.max(r, function (c) { - return c.height; - }); - if (max === undefined) max = 0; - maxY += max + (2*ty); - return max; - }); - - var cols = []; - - var offset = 0; - - for (var i=0; i i) return r[i].width - return 0; - }); - - var max = d3.max(slice); - cols.push(max); - if (grid) { - var line = Components.line() - .classed('grid column column-'+i) - .arrowStart(false) - .arrowEnd(false) - .interpolation(style); - - grid.datum([[offset, 0], [offset, maxY]]).call(line); - } - offset += max + (2*tx); - } - if (grid) { - var endLineCol = Components.line() - .classed('grid end column column-'+i) - .arrowStart(false) - .arrowEnd(false) - .interpolation(style); - - grid.datum([[offset, 0], [offset, maxY]]).call(endLineCol); - } - - var oy = ty; - var ox = 0; - nodes.forEach(function (r, ir) { - - ox = tx; - r.forEach(function (n, ic) { - d3.select(n).attr('x', ox).attr('y', oy); - ox += cols[ic] + (2*tx); - }); - - if (grid) { - var line = Components.line() - .classed('grid row row-'+ir) - .arrowStart(false) - .arrowEnd(false) - .interpolation(style); - if (ox !== tx) grid.datum([[0, oy - ty], [ox - tx, oy - ty]]).call(line); - } - oy += rows[ir] + (2*ty); - }); - if (grid) { - var endLineRow = Components.line() - .classed('grid end row row-'+nodes.length) - .arrowStart(false) - .arrowEnd(false) - .interpolation(style); - if (ox !== tx) grid.datum([[0, oy], [ox - tx, oy]]).call(endLineRow); - } - } - - impl.tx = function(value) { - if (!arguments.length) return tx; - tx = value; - return impl; - }; - - impl.ty = function(value) { - if (!arguments.length) return ty; - ty = value; - return impl; - }; - - impl.formatter = function(value) { - if (!arguments.length) return formatter; - formatter = value; - return impl; - }; - - impl.rowClassed = function(value) { - if (!arguments.length) return rowClassed; - rowClassed = value; - return impl; - }; - - impl.columnClassed = function(value) { - if (!arguments.length) return columnClassed; - columnClassed = value; - return impl; - }; - - // node to attach the grid to - impl.grid = function(value) { - if (!arguments.length) return grid; - grid = value; - return impl; - }; - - - return impl; -} - -export { matrix }; diff --git a/components/core/src/js/d3/pieChart.js b/components/core/src/js/d3/pieChart.js deleted file mode 100644 index c3a26ed..0000000 --- a/components/core/src/js/d3/pieChart.js +++ /dev/null @@ -1,90 +0,0 @@ -import { Tools } from './tools.js'; - -function pieChart() { - var outerRadius = 100, - innerRadius = 0, - classed = 'pie', - fill = null, - animationEnd = null, - animationDuration = Tools.redsiftDuration(), - animation = Tools.redsiftEasing(); - - function impl(selection) { - var arc = d3.svg.arc() - .outerRadius(outerRadius) - .innerRadius(innerRadius); - - - - selection.each(function(data) { - - var p = d3.select(this).selectAll('path.'+classed) - .data(data); - - p.enter().append('path') - .attr('class', classed); - p.exit().remove(); - - if (animation) { - p.transition().ease(animation).duration(animationDuration).attr('d', arc).each('end', function() { - if (animationEnd) { - animationEnd(); - } - }); - } else { - p.attr('d', arc); - } - - - if (fill) { - p.style('fill', fill); - } - }); - } - - impl.animationEnd = function(value) { - if (!arguments.length) return animationEnd; - animationEnd = value; - return impl; - }; - - impl.animation = function(value) { - if (!arguments.length) return animation; - animation = value; - return impl; - }; - - impl.animationDuration = function(value) { - if (!arguments.length) return animationDuration; - animationDuration = value; - return impl; - }; - - impl.fill = function(value) { - if (!arguments.length) return fill; - fill = value; - return impl; - }; - - impl.classed = function(value) { - if (!arguments.length) return classed; - classed = value; - return impl; - }; - - impl.outerRadius = function(value) { - if (!arguments.length) return outerRadius; - outerRadius = value; - return impl; - }; - - impl.innerRadius = function(value) { - if (!arguments.length) return innerRadius; - innerRadius = value; - return impl; - }; - - return impl; -} - -export { pieChart }; diff --git a/components/core/src/js/d3/radialChart.js b/components/core/src/js/d3/radialChart.js deleted file mode 100644 index 24f3fec..0000000 --- a/components/core/src/js/d3/radialChart.js +++ /dev/null @@ -1,390 +0,0 @@ -import { Tools } from './tools.js'; - -// Special CSS under this size -var SMALL_TH = 200; -var radialChartIndex = 0; - -// Adapted from: http://bl.ocks.org/bricedev/8aaef92e64007f882267 -// Uses Bostock's Reusable Chart Convention http://bost.ocks.org/mike/chart/ -function radialChart() { - var inst = radialChartIndex++; - - var width = 300, - height = width, - labelDistance = 8, - animationDelay = 0, - animationSegmentDelay = 100, - animationDuration = Tools.redsiftDuration(), - animation = Tools.redsiftEasing(), - prefix = "", - spokeOverhang = 14, - labelOrient = "left", - animationEnd = null, - cpfx = 'd3-rc', - band = [], - bandLabel = [], - selected = null; - - var formatNumber = d3.format(".0f"); - var tickAxisSize = 50; - var bandAxisSize = 40; - var axisPadding = 30; - - function impl(selection) { - - var minorTicks = 3; - var small = false; - if (height < SMALL_TH) { - small = true; - minorTicks = 2; - labelDistance = 4; - spokeOverhang = 8; - } - - var barHeight = (height / 2) - 30; - var labelRadius = barHeight + labelDistance; - var axisSize = tickAxisSize + (band.length > 0 ? bandAxisSize : 0); - - selection.each(function(data) { - var svg = d3.select(this).select('svg'); - var g = null; - var labels = null; - var svgWidth = width + axisSize; - var create = false; - if (svg.empty()) { - create = true; - svg = Tools.svgRoot(this, svgWidth, height); - g = svg.append("g") - .attr('class', cpfx + (small ? ' d3-small' : '')) - .attr("transform", "translate(" + (width / 2 + axisSize) + "," + height / 2 + ")"); - - } else { - g = svg.select('.'+cpfx); - labels = g.select('.segment-label'); - } - - svg - .attr('width', svgWidth) - .attr('height', height); - - - var extent = [1, d3.max(data, function(d) { - return d.value; - })]; - var barScale = d3.scale.linear() - .domain(extent) - .range([0, barHeight]); - - var keys = data.map(function(d, i) { - return d.name; - }); - var numBars = keys.length; - - var x = d3.scale.linear() - .domain(extent) - .range([0, -barHeight]); - - // Spokes - var spokes = g.selectAll("line") - .data(keys); - - spokes.enter().append("line") - .classed("spokes", true) - .attr("transform", function(d, i) { - return "rotate(" + (i * 360 / numBars) + ")"; - }); - - spokes.attr("y2", -barHeight - spokeOverhang); - // -- End Spokes - - - // Segment Background - function updateLabel(d, i) { - var t = d.valueText; - if (t === undefined) { - t = prefix + formatNumber(d.value); - } else if (typeof t === 'function') { - t = t(); - } - selected = i; - g.select("#segment-label-" + i).classed('hover', true).text(t); - } - - var arc = d3.svg.arc() - .startAngle(function(d, i) { - return (i * 2 * Math.PI) / numBars; - }) - .endAngle(function(d, i) { - return ((i + 1) * 2 * Math.PI) / numBars; - }) - .innerRadius(0); - - g.selectAll(".segment-bg") - .data(data) - .enter() - .append("path") - .attr("class", "segment-bg") - .each(function(d) { - d.outerRadius = barHeight + (2*spokeOverhang); - }) - .attr("d", arc) - .on('mouseover', updateLabel) - .on("mouseout",function(d, i) { - var t = keys[i]; - selected = null; - g.select("#segment-label-" + i).classed('hover', false).text(t); - }); - // -- End Segment Background - - - // Segment - var bind = g.selectAll(".segment") - .data(data); - - bind.attr("class", "update"); - - bind.enter() - .append("path") - .attr('class', 'segment'); - - bind.each(function(d, i) { - if (animation) { - if (d.animateFrom !== undefined) { - d.outerRadius = barScale(d.animateFrom); - } else { - d.outerRadius = 0; - } - } else { - d.outerRadius = barScale(d.value); - } - - if (i === selected) { - updateLabel(d, i); - } - }) - .attr("d", arc) - .attr('class', function(d) { - return 'segment '+ (d.classed ? d.classed : ''); - }) - .style("fill", function(d) { - if (typeof d.color === 'function') return d.color(); - - return d.color; - }); - - bind.exit().remove(); - - if (animation) { - bind.transition().ease(animation).duration(animationDuration).delay(function(d, i) { - return animationDelay + (i * animationSegmentDelay); - }) - .attrTween("d", function(d, index) { - var i = d3.interpolate(d.outerRadius, barScale(d.value)); - return function(t) { - d.outerRadius = i(t); - return arc(d, index); - }; - }) - .each("end", function() { - if (animationEnd) { - animationEnd(); - } - }); - } - // End Segment - - var circle = null; - var vals = null; - var bvals = null; - - if (create) { - circle = g.append("circle") - .attr("class", "outer-line"); - vals = g.append("g") - .attr("class", "x axis label"); - bvals = g.append("g") - .attr("class", "xb axis label"); - } else { - circle = g.select('.outer-line'); - vals = g.select('.x'); - bvals = g.select('.xb'); - } - - circle.attr("r", barHeight); - var offset = (width + (axisSize - axisPadding)) / 2; - vals.attr("transform", "translate(-" + offset + ",0)"); - bvals.attr("transform", "translate(-" + offset + ",0)"); - - var xAxis = d3.svg.axis() - .scale(x).orient(labelOrient) - .ticks(minorTicks) - .tickFormat(function(v) { - return prefix + formatNumber(v); - }); - - if (animation) { - vals = vals.transition().ease(animation).duration(animationDuration); - } - vals.call(xAxis); - - function tickHandlers(selection) { - return { - showTick: function (d, s) { - g.selectAll(selection).filter(function(d, i) { return (i === s); }).attr('style', 'opacity: 1.0'); - }, - hideAllTicks: function () { - g.selectAll(selection).attr('style', 'opacity: 0.0'); - } - } - } - - var onmousetl = tickHandlers('.tick-line'); - - g.select('.x').selectAll('text') - .on('mouseover', onmousetl.showTick) - .on("mouseout", onmousetl.hideAllTicks); - - if (band.length !== 0) { - if (animation) { - bvals = bvals.transition().ease(animation).duration(animationDuration); - } - - var bandAxis = d3.svg.axis() - .scale(x).orient(labelOrient === 'left' ? 'right' : 'left') - .tickValues([ band ]) - .tickFormat(function(v, i) { - if (bandLabel.length > i) { - var l = bandLabel[i]; - if (l != null) return l; - } - return prefix + formatNumber(v); - }); - bvals.call(bandAxis); - - g.selectAll(".band-line") - .data(band) - .enter().append("circle") - .attr("r", function(d) { - return barScale(d); - }) - .classed("band-line", true); - - - var onmousebl = tickHandlers('.band-line'); - - g.select('.xb').selectAll('text') - .on('mouseover', onmousebl.showTick) - .on("mouseout", onmousebl.hideAllTicks); - - } - - // Tick lines - g.selectAll(".tick-line") - .data(x.ticks(minorTicks)) - .enter().append("circle") - .attr("r", function(d) { - return barScale(d); - }) - .classed("tick-line", true); - - // Labels - var def = null; - if (labels == null) { - labels = g.append("g") - .attr("class", "segment-label label"); - - def = labels.append("def") - .append("path") - .attr("id", "label-path-"+inst) - } else { - def = labels.select('#label-path-'+inst); - } - - def.attr("d", "m0 " + -labelRadius + " a" + labelRadius + " " + labelRadius + " 0 1,1 -0.01 0"); - - labels.selectAll("text") - .data(keys) - .enter().append("text") - .style("text-anchor", "middle") - .append("textPath") - .attr("id", function(d, i) { return "segment-label-" + i; }) - .attr("xlink:href", "#label-path-"+inst) - .attr("startOffset", function(d, i) { - return i * 100 / numBars + 50 / numBars + '%'; - }) - .text(function(d) { - return d; - }); - - }); - } - - impl.band = function(value, label) { - if (!arguments.length) return band; - - if (!Array.isArray(value)) { - value = [ value ]; - } - - if (!Array.isArray(label)) { - label = [ label ]; - } - - band = value; - bandLabel = label; - return impl; - }; - - impl.width = function(value) { - if (!arguments.length) return width; - width = value; - height = value; - return impl; - }; - - impl.animationEnd = function(value) { - if (!arguments.length) return animationEnd; - animationEnd = value; - return impl; - }; - - impl.animation = function(value) { - if (!arguments.length) return animation; - animation = value; - return impl; - }; - - impl.animationDelay = function(value) { - if (!arguments.length) return animationDelay; - animationDelay = value; - return impl; - }; - - impl.animationSegmentDelay = function(value) { - if (!arguments.length) return animationSegmentDelay; - animationSegmentDelay = value; - return impl; - }; - - impl.animationDuration = function(value) { - if (!arguments.length) return animationDuration; - animationDuration = value; - return impl; - }; - - impl.prefix = function(value) { - if (!arguments.length) return prefix; - prefix = value; - return impl; - }; - - impl.labelOrient = function(value) { - if (!arguments.length) return labelOrient; - labelOrient = value; - return impl; - }; - - return impl; -} - -export { radialChart }; diff --git a/components/core/src/js/d3/scheduleChart.js b/components/core/src/js/d3/scheduleChart.js deleted file mode 100644 index ff27f23..0000000 --- a/components/core/src/js/d3/scheduleChart.js +++ /dev/null @@ -1,246 +0,0 @@ -import { tspanWrap } from './tspanWrap'; -import * as svg from '@redsift/d3-rs-svg'; -import { scaleTime } from 'd3-scale'; -import { axisBottom } from 'd3-axis'; -import { timeFormat } from 'd3-time-format'; -import { timeMinute } from 'd3-time'; - -var CSS = "text { font: 10px sans-serif; } \n"; - -function scheduleChart() { - - var width = 300, - height = 150, - eventHeight = 32, - eventPadding = 2, - textLeft = 4, - textRight = 4, - textTop = 2, - textBottom = 2; - - var colorText = '#7F736F', - colorLine = '#AB9A94', - colorLight = '#F7EEED', - ePx = '10px', - aPx = '12px'; - - function _isMinor(d) { - return (d.getMinutes() != 0); - } - - var eventRectStyle = function(d) { - var c = '#FFDF53'; - var o = '0.8'; - - if (d.status === 'proposed') { - c = '#50AFFA'; - o = '1.0'; - } else if (d.status === 'confirmed') { - c = '#37D192'; - } - - return 'fill:' + c + ';opacity:' + o; - } - - var eventTextStyle = function(d) { - var c = colorText; - if (d.status === 'proposed') { - c = colorLight; - } - return 'dominant-baseline: text-before-edge; font-size: ' + ePx + ';fill:' + c; - } - - var eventSymbolStyle = function(d) { - var c = 'none'; - if (d.self === true) { - c = colorLight; - } - return 'dominant-baseline: text-after-edge; text-anchor: end; font-size: ' + ePx + ';fill:' + c; - } - - var axisTextStyle = function(d) { - var c = colorText; - if (_isMinor(d)) { - // hide minors - c = 'none'; - } - - return 'font-size: ' + aPx + ';fill: ' + c; - } - - var axisLineStyle = function(d) { - var w = '1.6px'; - if (_isMinor(d)) { - w = '0.4px'; - } - - return 'stroke-width: ' + w + ';stroke: ' + colorLine; - } - - - function impl(selection) { - selection.each(function(provided) { - var extent = [ - d3.min(provided, (v) => v.start), - d3.max(provided, (v) => v.end), - ]; - - // filter out empty events (e.g. range setting values) - var data = provided.filter((d) => d.status != null); - - // create overlap indexes - data = data.map(function(d, i) { - var index = 0; - for (var pos = 0; pos < data.length; pos++) { - if (pos >= i) break; - var t = data[pos]; - - var overlap = (t.start >= d.start && t.start < d.end) || - (t.end > d.start && t.end <= d.end); - if (overlap) - { - index = t.index + 1; - } - } - d.index = index; - return d; - }); - - var x = scaleTime() - .domain(extent) - .rangeRound([0, width]); - - var xAxis = axisBottom() - .scale(x) - .tickFormat(timeFormat('%Hh')) - .ticks(timeMinute, 30) - .tickPadding(4) - .tickSize(-height, 0); - - var el = d3.select(this).append('g').attr('class', 'schedule'); - - var grid = el.append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0, ' + height + ')') - .call(xAxis); - - grid - .selectAll('g.x.axis g.tick text') - .attr('style', axisTextStyle) - .attr('transform', 'translate(' + -10 + ',0)'); //TODO: axis hardcode here - - grid - .selectAll('g.x.axis g.tick line') - .attr('style', axisLineStyle); - - // Event rects - var events = el.append('g') - .attr('class', 'events'); - - - var event = events.selectAll('g.event') - .data(data) - .enter() - .append('g') - .attr('class', 'event') - .attr('transform', (d) => 'translate(' + x(d.start) + ',' + (d.index * (eventHeight + eventPadding)) + ')'); - - - event.append('rect') - .attr('style', eventRectStyle) - .attr('width', (d) => x(d.end) - x(d.start)) - .attr('height', eventHeight); - - - var wrap = tspanWrap(); - event.append('text') - .attr('style', eventTextStyle) - .attr('x', textLeft) - .attr('y', textTop) - .attr('width', (d) => x(d.end) - x(d.start) - textLeft - textRight) - .attr('height', eventHeight - textTop - textBottom) - .text((d) => { console.log('d: ' + JSON.stringify(d, null, 4)); return d.summary}) - .call(wrap); - - - event.append('text') - .attr('class', 'symbol') - .attr('x', (d) => x(d.end) - x(d.start) - textRight) - .attr('y', eventHeight - textBottom) - .attr('style', eventSymbolStyle) - .text('♚'); - - }); - } - - impl.width = function(value) { - if (!arguments.length) return width; - width = value; - return impl; - }; - - impl.height = function(value) { - if (!arguments.length) return height; - height = value; - return impl; - }; - - impl.eventHeight = function(value) { - if (!arguments.length) return eventHeight; - eventHeight = value; - return impl; - }; - - impl.eventPadding = function(value) { - if (!arguments.length) return eventPadding; - eventPadding = value; - return impl; - }; - - impl.textPadding = function(value) { - if (!arguments.length) return { - top: textTop, - right: textRight, - bottom: textBottom, - left: textLeft - }; - if (value.top !== undefined) { - textTop = value.top; - textRight = value.right; - textBottom = value.bottom; - textLeft = value.left; - } else { - textTop = value; - textRight = value; - textBottom = value; - textLeft = value; - } - return impl; - }; - - impl.rasterize = function(selection, data, width, height, scale) { - var ratio = 1.91; - if (height == null || height == 0) { - height = Math.round(width / ratio); - } else if (width == null || width == 0) { - width = Math.round(height * ratio); - } - - var frame = svg.html() - .width(width) - .height(height) - .scale(scale) - .style(CSS); - - impl - .width(frame.childWidth()) - .height(frame.childHeight()); - - var div = selection.call(frame); - div.select(frame.child()).datum(data).call(impl); - } - - return impl; -} - -export { scheduleChart }; diff --git a/components/core/src/js/d3/tools.js b/components/core/src/js/d3/tools.js deleted file mode 100644 index 07f48e8..0000000 --- a/components/core/src/js/d3/tools.js +++ /dev/null @@ -1,236 +0,0 @@ -import { BezierEasing } from '../../../../../vendor/bezier-easing/index'; - -function circle(start, end, step, l, cx, cy, sx, sy) { - if (cx === undefined) cx = 0; - if (cy === undefined) cy = 0; - if (sx === undefined) sx = 0; - if (sy === undefined) sy = 0; - - let circle = []; - for (let i=start; i<=end; i+=step) { - let rad = (i / 360) * 2 * Math.PI - (Math.PI / 2); - - let sr = Math.sin(rad); - let cr = Math.cos(rad); - let x = l * cr + (sx * cr); - let y = l * sr + (sy * sr); - circle.push([x + cx, y + cy]); - } - return circle; -} - -let Tools = { - svgRoot(parent, width, height, classed) { - let svg = d3.select(parent).append("svg") - .attr("version", "1.1") - .attr("xmlns", "http://www.w3.org/2000/svg") - .attr("width", width) - .attr("height", height); - - if (classed != null) { - svg.attr("class", classed); - } - - // d3 work around - svg.node().setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); - - return svg; - }, - redsiftDuration() { - return 400; - }, - redsiftEasing() { - let f = this.redsiftBezier(); - return function(t) { - return f(t); - } - }, - redsiftBezier() { - return BezierEasing(0.175, 0.885, 0.335, 1.155); - }, - preconnectTo(url) { - // taken from https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/ - let hint = document.createElement("link"); - hint.rel = "preconnect"; - hint.href = url; - document.head.appendChild(hint); - }, - createCSSRuleSheet(media) { - // Create the