diff --git a/README.md b/README.md index 7b80b0f..7e48ef2 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,78 @@ -# Redsift UI +# RedsiftUI [![Circle CI](https://circleci.com/gh/Redsift/redsift-ui.svg?style=svg)](https://circleci.com/gh/Redsift/redsift-ui) -Common UI components for Sifts and Apps. +RedsiftUI is a user interface library for rapid development of Sifts and other Red Sift applications. The documentation is available at [here](https://docs.redsift.io/docs/client-code-redsift-ui). -## Development workflow +This repository does not contain UI components itself. It contains logic to grab available Red Sift UI components from NPM and to bundle them into packages. Those packages are then served by our CDN as UMD modules. There are multiple bundles which you can use: -### Interactive development +###### `core` bundle - $ npm install - $ npm run serve +Contains the Redsift theme in the *light* and *dark* flavour, as well as UI logic shared between components. -### Development integration into your project +To use the bundle add the following HTML to your project: -To extend and update **redsift-ui** from within an application which uses the library you can do the following (the application has to be a git repository): +```html + + + + -```shell -cd my-application -git submodule add https://github.com/Redsift/redsift-ui.git -(cd redsift-ui && npm install && sudo npm link) -npm link redsift-ui + + ``` -After these lines 'redsift-ui' is installed as npm module in *my-application* and you can import its files from 'npm_modules/redsift-ui'. +###### `sift` bundle -### Trigger application reload on redsift-ui change +This is probably the most important one to start with Sift development. It contains the Redsift theme in the *light* and *dark* flavour, together with the `rs-hero` component. -Gulp, Grunt, Meteor, etc. provide auto reload functionality when a file within the application tree is changing. Typically the `npm_modules` folder is not watched, therefore a change within the **redsift-ui** folder will not trigger a reload of the application. +To use the bundle add the following HTML to your project: -To enable this handy feature create a new file `./my-application/npm_modules/redsift-ui/trigger-app-reload.json` and add the following content: +```html + + + + -```JSON -{ - "watchedFolder": "/path/to/watched/folder" -} + + ``` -Replace `/path/to/watched/folder` with a path suited for your application and restart the interactive development setup of **redsift-ui**: +###### `full` bundle -> CAUTION: Do **NOT** use `~` to specify a home folder, it is not supported! +To get all the functionality provided by RedsiftUI use this bundle. It contains the Redsift theme in the *light* and *dark* flavour, together with the following (data visualization) components: -```shell -cd my-application/npm_modules/redsift-ui -npm run serve -``` +* `rs-hero`: A hero unit for your Sift or app +* `rs-radial-chart`: A radial chart for visualizing monthly data +* `rs-schedule`: A scheduling component -After this setup each change in **redsift-ui** will trigger a file creation/update in the `watchedFolder` and reload the application, which in turn pulls in the updated **redsift-ui** files. +To use the bundle add the following HTML to your project: -### Image optimization +```html + + + + -The repository contains the script `./scripts/forweb.sh` to optimize images in size. It also takes care of generating an image version for high-dpi, retina displays. + + +``` -#### Prerequisites (MacOS) +## Development and Customization -1. install [brew](http://brew.sh/) -2. install [cwebp](https://developers.google.com/speed/webp/docs/precompiled#getting_cwebp_dwebp_and_the_webp_libraries) in copying the scripts in the `bin` folder to `/usr/local/bin` -3. `brew install imagemagick` +The bundles are provided to start quickly with developing your Sifts or applications. To have more control on which parts to include into your project you are encouraged to use the UI components directly. The components are develop in ES2015 for the Javascript and with the [Stylus](http://stylus-lang.com/) CSS preprocessor. It is easy to integrate and customize these components into your projects. Have a look at the `./bundles` folder to get an idea on how to integrate the functionality into your own projects. The following components are available as separate repositories and also als NPM modules: -After that run the script like so: +* [ui-rs-core](https://github.com/Redsift/ui-rs-core) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-core) +* [ui-rs-hero](https://github.com/Redsift/ui-rs-hero) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-hero) +* [ui-rs-radial-chart](https://github.com/Redsift/ui-rs-radial-chart) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-radial-chart) +* [ui-rs-schedule](https://github.com/Redsift/ui-rs-schedule) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-schedule) +## Development Setup + +For development directly within this repository run + +```bash +> npm run serve ``` -./scripts/forweb.sh path/to/image outputpath/basename -``` + +within the repository folder. It will start a web server serving the content of `./samples` and supports live-reloading when a source file is changed. diff --git a/bundles/core/index.js b/bundles/core/index.js index e41a5cb..c161c36 100644 --- a/bundles/core/index.js +++ b/bundles/core/index.js @@ -1,2 +1 @@ -export * from '../../components/core/index.js'; -export { html } from '@redsift/d3-rs-svg'; +export * from '@redsift/ui-rs-core'; 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..3b273a2 100644 --- a/bundles/core/redsift-light.styl +++ b/bundles/core/redsift-light.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 = $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/crx/_components.js b/bundles/crx/_components.js new file mode 100644 index 0000000..d408382 --- /dev/null +++ b/bundles/crx/_components.js @@ -0,0 +1,6 @@ +export { RedsiftHero } from '@redsift/ui-rs-hero'; + +export { RedsiftLoader } from '@redsift/ui-rs-loader'; + +export { Scroll, Sliders } from '@redsift/ui-rs-core'; + diff --git a/bundles/crx/index.js b/bundles/crx/index.js index 3fa89ba..7baa904 100644 --- a/bundles/crx/index.js +++ b/bundles/crx/index.js @@ -1,10 +1 @@ -import { registerHeroElement } from '../../components/hero/index'; - -registerHeroElement(); - -export { - registerHeroElement -} from '../../components/hero/index.js'; - -export { Scroll } from '../../components/core/src/js/scroll/index'; -export { Sliders } from '../../components/core/src/js/widgets/sliders'; +export * from './_components'; diff --git a/bundles/crx/redsift-light.styl b/bundles/crx/redsift-light.styl new file mode 100644 index 0000000..70e3d6c --- /dev/null +++ b/bundles/crx/redsift-light.styl @@ -0,0 +1,2 @@ +@import '../../node_modules/@redsift/ui-rs-loader/src/index.import'; + diff --git a/bundles/full/_components.import.styl b/bundles/full/_components.import.styl index 2e83f98..4c1cb68 100644 --- a/bundles/full/_components.import.styl +++ b/bundles/full/_components.import.styl @@ -1,5 +1,5 @@ -@import '../../components/hero/index.import'; -@import '../../components/radial-chart/index.import'; +@import '../../node_modules/@redsift/ui-rs-hero/src/index.import'; +@import '../../node_modules/@redsift/ui-rs-radial-chart/src/index.import'; $heroSettings = { padding: 1em, diff --git a/bundles/full/_components.js b/bundles/full/_components.js index cf41e40..c001681 100644 --- a/bundles/full/_components.js +++ b/bundles/full/_components.js @@ -1,23 +1,17 @@ -// Note: registering custom elements by default: -import { registerHeroElement } from '../../components/hero/index'; -import { registerRadialChartElement } from '../../components/radial-chart/index'; -import { registerScheduleElement } from '../../components/schedule/index'; - -registerHeroElement(); -registerRadialChartElement(); -registerScheduleElement(); +export { html as svg } from '@redsift/d3-rs-svg'; +export * from '@redsift/d3-rs-core'; export { registerHeroElement, RedsiftHero -} from '../../components/hero/index.js'; +} from '@redsift/ui-rs-hero'; export { registerRadialChartElement, RedsiftRadialChart -} from '../../components/radial-chart/index.js'; +} from '@redsift/ui-rs-radial-chart'; export { registerScheduleElement, RedsiftSchedule -} from '../../components/schedule/index.js'; +} from '@redsift/ui-rs-schedule'; 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/bundles/sift/_components.import.styl b/bundles/sift/_components.import.styl index 4525ffa..5ea76ca 100644 --- a/bundles/sift/_components.import.styl +++ b/bundles/sift/_components.import.styl @@ -1,4 +1,4 @@ -@import '../../components/hero/index.import'; +@import '../../node_modules/@redsift/ui-rs-hero/src/index.import'; $heroSettings = { padding: 1em, diff --git a/bundles/sift/_components.js b/bundles/sift/_components.js index 0eccfc7..5f0ea7f 100644 --- a/bundles/sift/_components.js +++ b/bundles/sift/_components.js @@ -1,9 +1,7 @@ -// Note: registering custom elements by default: -import { registerHeroElement } from '../../components/hero/index'; - -registerHeroElement(); +export { html as svg } from '@redsift/d3-rs-svg'; +export * from '@redsift/d3-rs-core'; export { registerHeroElement, RedsiftHero -} from '../../components/hero/index.js'; +} from '@redsift/ui-rs-hero'; diff --git a/circle.yml b/circle.yml index 41b12ef..b0828b4 100644 --- a/circle.yml +++ b/circle.yml @@ -13,7 +13,7 @@ checkout: dependencies: override: - - node node_modules/gulp/bin/gulp.js + - npm run build - mv ./dist ${CIRCLE_ARTIFACTS}/dist test: @@ -21,11 +21,10 @@ test: - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/core/redsift-light.min.css ]" - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/sift/redsift-light.min.css ]" - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/full/redsift-light.min.css ]" - - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/core/redsift.umd.min.js ]" - - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sift/redsift.umd.min.js ]" - - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/full/redsift.umd.min.js ]" - - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/crx/redsift.umd.min.js ]" - - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sdk/color-tools.umd.min.js ]" + - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/core/redsift.umd-es2015.min.js ]" + - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sift/redsift.umd-es2015.min.js ]" + - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/full/redsift.umd-es2015.min.js ]" + - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/crx/redsift.umd-es2015.min.js ]" deployment: production: diff --git a/components/.babelrc b/components/.babelrc deleted file mode 100644 index 3cde77c..0000000 --- a/components/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["es2015-rollup"] -} 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