wahyu
9 months ago
17 changed files with 1179 additions and 0 deletions
@ -0,0 +1,270 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcCore from '@grapecity/wijmo'; |
||||
import { Grid } from './components/Grid'; |
||||
import { RadialGauge } from './components/RadialGauge'; |
||||
import { LinearGauge } from './components/LinearGauge'; |
||||
import { BarChart } from './components/BarChart'; |
||||
import { ColumnChart } from './components/ColumnChart'; |
||||
import { LineChart } from './components/LineChart'; |
||||
import { BubbleChart } from './components/BubbleChart'; |
||||
import { BulletGraph } from './components/BulletGraph'; |
||||
import { Blank } from './components/Blank'; |
||||
import { Tile } from './components/Tile'; |
||||
// Wijmo and Material Design Lite |
||||
import '@grapecity/wijmo.styles/themes/material/wijmo.theme.material.indigo-amber.css'; |
||||
// Styles |
||||
import './index.css'; |
||||
|
||||
import './license' |
||||
|
||||
export default class App extends React.Component { |
||||
constructor() { |
||||
super(...arguments); |
||||
// Color palette |
||||
this.palette = ['#8e99f3', '#ffca28', '#5c6bc0', '#bbdefb']; |
||||
// Icons assets |
||||
this.icons = { |
||||
grid: [ |
||||
<path d="M57,5H7A2,2,0,0,0,5,7v7H59V7A2,2,0,0,0,57,5Zm1,19V23H46V15H45v8H33V15H32v8H19V15H18v8H6v1H18v7H6v1H18v8H6v1H18v8H6v1H18v8h1V50H32v8h1V50H45v8h1V50H58V49H46V41H58V40H46V32H58V31H46V24ZM19,24H32v7H19Zm0,8H32v8H19Zm0,17V41H32v8Zm26,0H33V41H45Zm0-9H33V32H45Zm0-9H33V24H45Z" fill={this.palette[3]}/>, |
||||
<path d="M57,5H7A2,2,0,0,0,5,7V57a2,2,0,0,0,2,2H57a2,2,0,0,0,2-2V7A2,2,0,0,0,57,5ZM7,6H57a1,1,0,0,1,1,1v7H6V7A1,1,0,0,1,7,6ZM57,58H7a1,1,0,0,1-1-1V15H58V57A1,1,0,0,1,57,58Z" fill={this.palette[0]}/>, |
||||
], |
||||
barChart: [ |
||||
<rect x="12" y="34" width="40" height="7" fill={this.palette[1]}/>, |
||||
<rect x="12" y="46" width="33" height="7" fill={this.palette[2]}/>, |
||||
<rect x="12" y="11" width="32" height="7" fill={this.palette[3]}/>, |
||||
<path d="M36,22v7H12V22ZM10,14H8v1h2Zm0,11H8v1h2Zm0,12H8v1h2Zm0,12H8v1h2Zm49,9H7a.94.94,0,0,1-1-1V5H5V57a2,2,0,0,0,2,2H59Z" fill={this.palette[0]}/>, |
||||
], |
||||
columnChart: [ |
||||
<rect x="23" y="12.02" width="7" height="40" fill={this.palette[1]}/>, |
||||
<rect x="11" y="19.02" width="7" height="33" fill={this.palette[2]}/>, |
||||
<rect x="46" y="20.02" width="7" height="32" fill={this.palette[3]}/>, |
||||
<path d="M41,52H34V26h7Zm8,2v2h1V54ZM37,54v2h1V54ZM26,54v2h1V54ZM14,54v2h1V54ZM5,5V57a2,2,0,0,0,2,2H58V58H7a1,1,0,0,1-1-1V5Z" fill={this.palette[0]}/>, |
||||
], |
||||
bubbleChart: [ |
||||
<path d="M59,58H7a.94.94,0,0,1-1-1V5H5V57a2,2,0,0,0,2,2H59Z" fill={this.palette[0]}/>, |
||||
<path d="M36,23a2,2,0,1,1,2,2A2,2,0,0,1,36,23ZM13.63,29.07a2,2,0,1,0-2-2A2,2,0,0,0,13.63,29.07Zm9,12a2,2,0,1,0-2-2A2,2,0,0,0,22.63,41.07Zm24-5a2,2,0,1,0-2-2A2,2,0,0,0,46.63,36.07Zm-2.5,17a1.5,1.5,0,1,0-1.5-1.5A1.5,1.5,0,0,0,44.13,53.07Z" fill={this.palette[2]}/>, |
||||
<path d="M19,12a4,4,0,1,1,4,4A4,4,0,0,1,19,12Zm6.63,16.07a3,3,0,1,0-3-3A3,3,0,0,0,25.63,28.07Zm11.5,8a3.5,3.5,0,1,0-3.5-3.5A3.5,3.5,0,0,0,37.13,36.07Zm-1,10a2.5,2.5,0,1,0-2.5-2.5A2.5,2.5,0,0,0,36.13,46.07Zm14,0a2.5,2.5,0,1,0-2.5-2.5A2.5,2.5,0,0,0,50.13,46.07Z" fill={this.palette[3]}/>, |
||||
], |
||||
lineChart: [ |
||||
<polygon points="51 20.41 49.59 19 32.5 36.97 27.5 31.97 11 48.48 12.5 49.98 27.5 34.97 32.5 39.97 51 20.41" fill={this.palette[3]}/>, |
||||
<path d="M6,5V57a1,1,0,0,0,1,1H58v1H7a2,2,0,0,1-2-2V5Z" fill={this.palette[0]}/>, |
||||
<polygon points="34.92 30.42 27.5 23 11 39.51 12.5 41.01 27.5 26 33.42 31.92 34.92 30.42" fill={this.palette[2]}/>, |
||||
<polygon points="40.58 36.08 39.08 37.58 45.97 44.47 47.38 42.88 40.58 36.08" fill={this.palette[2]}/>, |
||||
], |
||||
radialGauge: [ |
||||
<circle cx="32" cy="32" r="4" fill={this.palette[1]}/>, |
||||
<path d="M32,6A26,26,0,1,1,6,32,26,26,0,0,1,32,6m0-1A27,27,0,1,0,59,32,27,27,0,0,0,32,5ZM43.37,20.63a1.49,1.49,0,0,0-2.12,0l-6.84,6.84a6.51,6.51,0,0,1,2.12,2.12l6.84-6.84A1.49,1.49,0,0,0,43.37,20.63Z" fill={this.palette[0]}/>, |
||||
<path d="M34,11a2,2,0,1,1-2-2A2,2,0,0,1,34,11ZM17,15a2,2,0,1,0,2,2A2,2,0,0,0,17,15Zm30,0a2,2,0,1,0,2,2A2,2,0,0,0,47,15ZM11,28a2,2,0,1,0,2,2A2,2,0,0,0,11,28Zm42,.91a2,2,0,1,0,2,2A2,2,0,0,0,53,28.91ZM32,40.76A25.87,25.87,0,0,0,14.09,48a23.95,23.95,0,0,0,35.83,0A25.88,25.88,0,0,0,32,40.76Z" fill={this.palette[3]}/>, |
||||
], |
||||
linearGauge: [ |
||||
<path d="M29.5,19A4.5,4.5,0,1,1,34,23.5,4.49,4.49,0,0,1,29.5,19Zm-1.15-2H11a2,2,0,0,0-1.9,2.65,2,2,0,0,0,2,1.35H28.21A5.72,5.72,0,0,1,28,19.5c0-.08,0-.15,0-.23s0-.18,0-.27A6,6,0,0,1,28.35,17ZM54.9,18.35a2,2,0,0,0-2-1.35H39.65a5.89,5.89,0,0,1,0,4H53A2,2,0,0,0,54.9,18.35Z" fill={this.palette[2]}/>, |
||||
<path d="M53,36H29.05a6,6,0,0,0,.29-1.85,6.13,6.13,0,0,0-.4-2.15h24a2,2,0,0,1,2,1.35A2,2,0,0,1,53,36ZM17.74,32H11a2,2,0,0,0-1.9,2.65,2,2,0,0,0,2,1.35h6.55a6.28,6.28,0,0,1-.29-1.85A6.13,6.13,0,0,1,17.74,32Zm5.6,6.65a4.5,4.5,0,1,0-4.5-4.5A4.5,4.5,0,0,0,23.34,38.65Z" fill={this.palette[3]}/>, |
||||
<path d="M38.34,49.15A6.28,6.28,0,0,0,38.63,51H11.08a2,2,0,0,1-2-1.35A2,2,0,0,1,11,47H38.74A6.13,6.13,0,0,0,38.34,49.15Zm16.56-.8a2,2,0,0,0-2-1.35h-3a6.13,6.13,0,0,1,.4,2.15A6,6,0,0,1,50.05,51h3A2,2,0,0,0,54.9,48.35Zm-10.56,5.3a4.5,4.5,0,1,0-4.5-4.5A4.5,4.5,0,0,0,44.34,53.65Z" fill={this.palette[1]}/>, |
||||
], |
||||
bulletGraph: [ |
||||
<rect x="41" y="17" width="14" height="11" fill={this.palette[2]}/>, |
||||
<rect x="40.89" y="33.96" width="14" height="11" fill={this.palette[2]}/>, |
||||
<polygon points="25 17 25 19 34 19 34 26 25 26 25 28 39 28 39 17 25 17" fill={this.palette[1]}/>, |
||||
<polygon points="25 36 29 36 29 43 25 43 25 45 39 45 39 34 25 34 25 36" fill={this.palette[1]}/>, |
||||
<rect x="9" y="26" width="14" height="2" fill={this.palette[3]}/>, |
||||
<rect x="9" y="17" width="14" height="2" fill={this.palette[3]}/>, |
||||
<rect x="9" y="34" width="14" height="2" fill={this.palette[3]}/>, |
||||
<rect x="9" y="43" width="14" height="2" fill={this.palette[3]}/>, |
||||
<path d="M49,53v2h1V53ZM37,53v2h1V53ZM26,53v2h1V53ZM14,53v2h1V53ZM31,24H9V21H31ZM26,41H9V38H26ZM60,58H6V57H60Z" fill={this.palette[0]}/>, |
||||
], |
||||
blank: [ |
||||
<path d="M40,5V6H33V5ZM24,6h7V5H24ZM15,6h7V5H15Zm7,53V58H15v1Zm9-1H24v1h7ZM6,49V42H5v7ZM5,22H6V15H5ZM51,6h6a1,1,0,0,1,1,1v6h1V7a2,2,0,0,0-2-2H51ZM6,31V24H5v7Zm0,9V33H5v7ZM58,15v7h1V15ZM6,13V7A1,1,0,0,1,7,6h6V5H7A2,2,0,0,0,5,7v6ZM58,51v6a1,1,0,0,1-1,1H51v1h6a2,2,0,0,0,2-2V51ZM13,58H7a1,1,0,0,1-1-1V51H5v6a2,2,0,0,0,2,2h6ZM58,24v7h1V24Zm1,18H58v7h1ZM49,58H42v1h7ZM42,5V6h7V5ZM40,58H33v1h7ZM58,33v7h1V33Z" fill={this.palette[0]}/>, |
||||
], |
||||
}; |
||||
// Tile names and types |
||||
this.tileCatalog = [ |
||||
{ name: 'Grid', tile: Grid, icon: this.icons.grid }, |
||||
{ name: 'Radial Gauge', tile: RadialGauge, icon: this.icons.radialGauge }, |
||||
{ name: 'Linear Gauge', tile: LinearGauge, icon: this.icons.linearGauge }, |
||||
{ name: 'Bar Chart', tile: BarChart, icon: this.icons.barChart }, |
||||
{ name: 'Column Chart', tile: ColumnChart, icon: this.icons.columnChart }, |
||||
{ name: 'Line Chart', tile: LineChart, icon: this.icons.lineChart }, |
||||
{ name: 'Bubble Chart', tile: BubbleChart, icon: this.icons.bubbleChart }, |
||||
{ name: 'Bullet Graph', tile: BulletGraph, icon: this.icons.bulletGraph }, |
||||
{ name: 'Blank', tile: Blank, icon: this.icons.blank }, |
||||
]; |
||||
this.key = 0; |
||||
this.state = { |
||||
isWideMenu: false, |
||||
tileCatalog: new wjcCore.CollectionView(this.tileCatalog), |
||||
tiles: this.getTiles(), |
||||
key: this.key, |
||||
data: this.getData(), |
||||
}; |
||||
} |
||||
// tiles currently in use |
||||
getTiles() { |
||||
return [ |
||||
{ name: this.tileCatalog[1].name, key: this.key += 1 }, |
||||
{ name: this.tileCatalog[2].name, key: this.key += 1 }, |
||||
{ name: this.tileCatalog[5].name, key: this.key += 1 }, |
||||
{ name: this.tileCatalog[7].name, key: this.key += 1 }, |
||||
{ name: this.tileCatalog[0].name, key: this.key += 1 }, |
||||
]; |
||||
} |
||||
// generate some data to show in the tiles |
||||
getData() { |
||||
let data = []; |
||||
const today = new Date(); |
||||
for (let i = 0; i < 12; i++) { |
||||
const sales = 100 + Math.random() * 800 + i * 50; |
||||
const expenses = 50 + Math.random() * 300 + i * 5; |
||||
data.push({ |
||||
id: i, |
||||
date: wjcCore.DateTime.addMonths(today, 12 - i), |
||||
sales: sales, |
||||
expenses: expenses, |
||||
profit: sales - expenses, |
||||
}); |
||||
} |
||||
return data; |
||||
} |
||||
// gets a tile content by name |
||||
getTileContent(name) { |
||||
const { data, tileCatalog } = this.state; |
||||
const arr = tileCatalog.items; |
||||
for (let i = 0; i < arr.length; i++) { |
||||
if (arr[i].name == name) { |
||||
return React.createElement(arr[i].tile, { |
||||
data: new wjcCore.CollectionView(data), |
||||
palette: this.palette |
||||
}); |
||||
} |
||||
} |
||||
throw '*** tile not found: ' + name; |
||||
} |
||||
// adds a tile to the dashboard |
||||
addTile(name) { |
||||
const { tiles, key: stateKey } = this.state; |
||||
const key = stateKey + 1; |
||||
this.setState({ tiles: [{ name, key }, ...tiles], key }); |
||||
} |
||||
// removes a tile from the dashboard |
||||
removeTile(tileIndex) { |
||||
const tiles = this.state.tiles.filter((item, index) => index != tileIndex); |
||||
this.setState({ tiles: tiles }); |
||||
} |
||||
// initialize component after it has been mounted |
||||
componentDidMount() { |
||||
// enable tile drag/drop |
||||
const panel = document.querySelector('.dashboard'); |
||||
this.enableItemReorder(panel); |
||||
} |
||||
// allow users to re-order elements within a panel element |
||||
// we work with the DOM elements and update the state when done. |
||||
enableItemReorder(panel) { |
||||
let dragSource = null; |
||||
let dropTarget = null; |
||||
// add drag/drop event listeners |
||||
panel.addEventListener('dragstart', (e) => { |
||||
const target = wjcCore.closest(e.target, '.tile'); |
||||
if (target && target.parentElement == panel) { |
||||
dragSource = target; |
||||
wjcCore.addClass(dragSource, 'drag-source'); |
||||
const dt = e.dataTransfer; |
||||
dt.effectAllowed = 'move'; |
||||
dt.setData('text', dragSource.innerHTML); |
||||
} |
||||
}); |
||||
panel.addEventListener('dragover', (e) => { |
||||
if (dragSource) { |
||||
let tile = wjcCore.closest(e.target, '.tile'); |
||||
if (tile == dragSource) { |
||||
tile = null; |
||||
} |
||||
if (dragSource && tile && tile != dragSource) { |
||||
e.preventDefault(); |
||||
e.dataTransfer.dropEffect = 'move'; |
||||
} |
||||
if (dropTarget != tile) { |
||||
wjcCore.removeClass(dropTarget, 'drag-over'); |
||||
dropTarget = tile; |
||||
wjcCore.addClass(dropTarget, 'drag-over'); |
||||
} |
||||
} |
||||
}); |
||||
panel.addEventListener('drop', (e) => { |
||||
if (dragSource && dropTarget) { |
||||
// finish drag/drop |
||||
e.stopPropagation(); |
||||
e.stopImmediatePropagation(); |
||||
e.preventDefault(); |
||||
// re-order HTML elements (optional here, we're updating the state later) |
||||
const srcIndex = getIndex(dragSource); |
||||
const dstIndex = getIndex(dropTarget); |
||||
const refChild = srcIndex > dstIndex ? dropTarget : dropTarget.nextElementSibling; |
||||
dragSource.parentElement.insertBefore(dragSource, refChild); |
||||
// focus and view on the tile that was dragged |
||||
dragSource.focus(); |
||||
// update state |
||||
let tiles = this.state.tiles.slice(); |
||||
tiles.splice(srcIndex, 1); |
||||
tiles.splice(dstIndex, 0, this.state.tiles[srcIndex]); |
||||
this.setState({ tiles: tiles }); |
||||
} |
||||
}); |
||||
panel.addEventListener('dragend', () => { |
||||
wjcCore.removeClass(dragSource, 'drag-source'); |
||||
wjcCore.removeClass(dropTarget, 'drag-over'); |
||||
dragSource = dropTarget = null; |
||||
}); |
||||
function getIndex(e) { |
||||
const p = e.parentElement; |
||||
for (let i = 0; i < p.children.length; i++) { |
||||
if (p.children[i] == e) |
||||
return i; |
||||
} |
||||
return -1; |
||||
} |
||||
} |
||||
// render the dashboard |
||||
render() { |
||||
const { tiles, isWideMenu } = this.state; |
||||
// animated toggle menu |
||||
const renderMenuToggle = (<div className={'menu-toggle' + (this.state.isWideMenu ? ' menu--open' : '')} onClick={() => this.setState({ isWideMenu: !isWideMenu })}> |
||||
<svg width="30" height="20" viewBox="0 0 30 20" fill={this.palette[2]}> |
||||
<rect x="10" y="5" width="11" height="1"/> |
||||
<rect x="10" y="15" width="11" height="1"/> |
||||
<polygon points="29.48 10.27 24.23 5.03 23.52 5.73 27.79 10 10 10 10 11 27.79 11 23.52 15.27 24.23 15.97 29.48 10.73 29.7 10.5 29.48 10.27"/> |
||||
</svg> |
||||
</div>); |
||||
// menu items |
||||
const renderMenuItems = (<React.Fragment> |
||||
{this.tileCatalog.map((item) => (<div key={`Menu ${item.name}`} className="menu-item" title={item.name} onClick={() => this.addTile(item.name)}> |
||||
<svg width="64" height="64" viewBox="0 0 64 64"> |
||||
{item.icon.map((entity, key) => (<React.Fragment key={`Menu Item ${key}`}>{entity}</React.Fragment>))} |
||||
</svg> |
||||
<div className="menu-item-name">{item.name}</div> |
||||
</div>))} |
||||
</React.Fragment>); |
||||
// displayed when the dashboard is empty |
||||
const renderBlankTile = (<div className="blank"> |
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill={this.palette[0]}> |
||||
<path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H8.83L12,19.17L15.17,16H20V4H4M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z"/> |
||||
</svg> |
||||
<div>Click on an item on the menu bar to add the new tile to the dashboard.</div> |
||||
</div>); |
||||
// list of tiles |
||||
const renderTiles = (<React.Fragment> |
||||
{tiles.map((item, index) => (<Tile header={item.name} content={this.getTileContent(item.name)} onRemove={this.removeTile.bind(this)} index={index} key={item.key}/>))} |
||||
</React.Fragment>); |
||||
const renderDashboard = tiles.length ? renderTiles : renderBlankTile; |
||||
return (<div className="container"> |
||||
<div className={`menu ${isWideMenu ? 'menu--open' : ''}`}> |
||||
{renderMenuToggle} |
||||
{renderMenuItems} |
||||
</div> |
||||
<div className="hr"/> |
||||
<div className="content"> |
||||
<div className="dashboard">{renderDashboard}</div> |
||||
</div> |
||||
</div>); |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcChart from '@grapecity/wijmo.chart'; |
||||
import * as wjChart from '@grapecity/wijmo.react.chart'; |
||||
export const BarChart = ({ data, palette }) => (<wjChart.FlexChart chartType={wjcChart.ChartType.Bar} itemsSource={data} palette={palette} bindingX="date"> |
||||
<wjChart.FlexChartAxis wjProperty="axisX" format="MMM-yy"/> |
||||
<wjChart.FlexChartSeries name="Sales" binding="sales"/> |
||||
<wjChart.FlexChartSeries name="Expenses" binding="expenses"/> |
||||
<wjChart.FlexChartSeries name="Profit" binding="profit" chartType={wjcChart.ChartType.LineSymbols}/> |
||||
</wjChart.FlexChart>); |
||||
@ -0,0 +1,3 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
export const Blank = () => <div className="blank-tile">This is an empty tile.</div>; |
||||
@ -0,0 +1,9 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcChart from '@grapecity/wijmo.chart'; |
||||
import * as wjChart from '@grapecity/wijmo.react.chart'; |
||||
export const BubbleChart = ({ data, palette }) => (<wjChart.FlexChart chartType={wjcChart.ChartType.Bubble} itemsSource={data} palette={palette} bindingX="date"> |
||||
<wjChart.FlexChartAxis wjProperty="axisX" format="MMM yy"/> |
||||
<wjChart.FlexChartSeries name="Sales/Profit" binding="sales,profit"/> |
||||
</wjChart.FlexChart>); |
||||
@ -0,0 +1,22 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcCore from '@grapecity/wijmo'; |
||||
import * as wjGauge from '@grapecity/wijmo.react.gauge'; |
||||
export const BulletGraph = ({ data }) => (<div style={{ width: '100%', padding: '0 1rem', overflow: 'hidden' }}> |
||||
<table className="table"> |
||||
<tbody> |
||||
{data.items.map((item, index) => (<tr key={index}> |
||||
<td>{wjcCore.Globalize.format(item.date, 'MMM yyyy')}</td> |
||||
<td> |
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="orange" style={{ display: item.profit <= 400 ? 'block' : 'none' }}> |
||||
<path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"/> |
||||
</svg> |
||||
</td> |
||||
<td> |
||||
<wjGauge.BulletGraph hasShadow={false} value={item.profit} min={0} bad={400} target={600} good={600} max={1000}/> |
||||
</td> |
||||
</tr>))} |
||||
</tbody> |
||||
</table> |
||||
</div>); |
||||
@ -0,0 +1,11 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcChart from '@grapecity/wijmo.chart'; |
||||
import * as wjChart from '@grapecity/wijmo.react.chart'; |
||||
export const ColumnChart = ({ data, palette }) => (<wjChart.FlexChart chartType={wjcChart.ChartType.Column} itemsSource={data} palette={palette} bindingX="date" axisX={{ format: 'MMM-yy' }}> |
||||
<wjChart.FlexChartAxis wjProperty="axisX" format="MMM yy"/> |
||||
<wjChart.FlexChartSeries name="Sales" binding="sales"/> |
||||
<wjChart.FlexChartSeries name="Expenses" binding="expenses"/> |
||||
<wjChart.FlexChartSeries name="Profit" binding="profit" chartType={wjcChart.ChartType.LineSymbols}/> |
||||
</wjChart.FlexChart>); |
||||
@ -0,0 +1,12 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcGrid from '@grapecity/wijmo.grid'; |
||||
import * as wjGrid from '@grapecity/wijmo.react.grid'; |
||||
export const Grid = ({ data, palette }) => (<wjGrid.FlexGrid isReadOnly={true} headersVisibility={wjcGrid.HeadersVisibility.Column} selectionMode={wjcGrid.SelectionMode.ListBox} itemsSource={data}> |
||||
<wjGrid.FlexGridColumn header="ID" binding="id" width={50}/> |
||||
<wjGrid.FlexGridColumn header="Date" width="*" binding="date" format="MMM yyyy"/> |
||||
<wjGrid.FlexGridColumn header="Sales" binding="sales" format="c"/> |
||||
<wjGrid.FlexGridColumn header="Expenses" binding="expenses" format="c"/> |
||||
<wjGrid.FlexGridColumn header="Profit" binding="profit" format="c"/> |
||||
</wjGrid.FlexGrid>); |
||||
@ -0,0 +1,10 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcChart from '@grapecity/wijmo.chart'; |
||||
import * as wjChart from '@grapecity/wijmo.react.chart'; |
||||
export const LineChart = ({ data, palette }) => (<wjChart.FlexChart chartType={wjcChart.ChartType.Line} itemsSource={data} palette={palette} bindingX="date"> |
||||
<wjChart.FlexChartAxis wjProperty="axisX" format="MMM yy"/> |
||||
<wjChart.FlexChartSeries name="Sales" binding="sales"/> |
||||
<wjChart.FlexChartSeries name="Profit" binding="profit" chartType={wjcChart.ChartType.LineSymbols}/> |
||||
</wjChart.FlexChart>); |
||||
@ -0,0 +1,26 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcCore from '@grapecity/wijmo'; |
||||
import * as wjGauge from '@grapecity/wijmo.react.gauge'; |
||||
export const LinearGauge = ({ data, palette }) => { |
||||
const lastItem = data.items[data.items.length - 1]; |
||||
return (<div style={{ width: '100%' }}> |
||||
<div className="flex-row"> |
||||
<h4>Sales: {wjcCore.Globalize.format(lastItem.sales, 'c')}</h4> |
||||
<wjGauge.LinearGauge min={0} max={1000} thickness={0.15} thumbSize={9} value={lastItem.sales} pointer={{ color: palette[0] }}/> |
||||
</div> |
||||
|
||||
<div className="flex-row"> |
||||
<h4>Expenses: {wjcCore.Globalize.format(lastItem.expenses, 'c')}</h4> |
||||
<wjGauge.LinearGauge min={0} max={1000} thickness={0.15} thumbSize={9} value={lastItem.expenses} pointer={{ color: palette[1] }}/> |
||||
</div> |
||||
|
||||
<div className="flex-row"> |
||||
<h4>Profit: {wjcCore.Globalize.format(lastItem.profit, 'c')}</h4> |
||||
<wjGauge.LinearGauge min={0} max={1000} thickness={0.15} thumbSize={9} value={lastItem.profit} pointer={{ color: palette[2] }}/> |
||||
</div> |
||||
|
||||
<h3>KPIs for {wjcCore.Globalize.format(lastItem.date, 'MMMM yyyy')}</h3> |
||||
</div>); |
||||
}; |
||||
@ -0,0 +1,12 @@
|
||||
// React |
||||
import * as React from 'react'; |
||||
// Wijmo |
||||
import * as wjcCore from '@grapecity/wijmo'; |
||||
import * as wjGauge from '@grapecity/wijmo.react.gauge'; |
||||
export const RadialGauge = ({ data, palette }) => { |
||||
const lastItem = data.items[data.items.length - 1]; |
||||
return (<React.Fragment> |
||||
<wjGauge.RadialGauge min={0} max={1000} format="c0" value={lastItem.profit}/> |
||||
<h3>Profit for {wjcCore.Globalize.format(lastItem.date, 'MMMM yyyy')}</h3> |
||||
</React.Fragment>); |
||||
}; |
||||
@ -0,0 +1,14 @@
|
||||
import * as React from 'react'; |
||||
export const Tile = ({ header, content, index, onRemove }) => (<div className="tile" draggable={true}> |
||||
<div className="tile-container"> |
||||
<div className="tile-header">{header}</div> |
||||
<div className="buttons"> |
||||
<div className="button" title="Close Tile" onClick={() => onRemove(index)}> |
||||
<svg width="24" height="24" viewBox="0 0 24 24"> |
||||
<path d="M12.71,12l4.64-4.65a.49.49,0,1,0-.7-.7L12,11.29,7.35,6.65a.49.49,0,0,0-.7.7L11.29,12,6.65,16.65a.48.48,0,0,0,0,.7.48.48,0,0,0,.7,0L12,12.71l4.65,4.64a.48.48,0,0,0,.7,0,.48.48,0,0,0,0-.7Z"/> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="tile-content">{content}</div> |
||||
</div>); |
||||
@ -0,0 +1,394 @@
|
||||
/* app */ |
||||
*, *::before, *::after { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
/* customize the browser's scrollbar: */ |
||||
*::-webkit-scrollbar { |
||||
width: 6px; |
||||
height: 6px; |
||||
} |
||||
*::-webkit-scrollbar-track { |
||||
border-radius: 0.25rem; |
||||
background: rgba(0, 0, 0, 0.1); |
||||
} |
||||
*::-webkit-scrollbar-thumb { |
||||
border-radius: 0.25rem; |
||||
background: rgba(0, 0, 0, 0.2); |
||||
} |
||||
*::-webkit-scrollbar-thumb:hover { |
||||
background: rgba(0, 0, 0, 0.4); |
||||
} |
||||
*::-webkit-scrollbar-thumb:active { |
||||
background: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
html, |
||||
body { |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
background-color: #f7faff; |
||||
font-size: 0.875rem; |
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; |
||||
padding: 0; |
||||
margin: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: 0.875rem; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: 0.875rem; |
||||
font-size: 0.75rem; |
||||
font-weight: 400; |
||||
min-width: 7rem; |
||||
} |
||||
|
||||
.flex-row { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0 1rem; |
||||
} |
||||
|
||||
.button { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
#app { |
||||
flex: 1 1 auto; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
height: 100%; |
||||
width: 100%; |
||||
max-width: 100%; |
||||
background: #f2f6fe; |
||||
} |
||||
|
||||
.hr { |
||||
width: 1px; |
||||
height: 100%; |
||||
position: relative; |
||||
background: #e4ecfb; |
||||
z-index: 1; |
||||
} |
||||
.hr::before { |
||||
content: ''; |
||||
display: block; |
||||
width: 1px; |
||||
height: 100%; |
||||
background-color: #f6f9fe; |
||||
} |
||||
|
||||
.blank { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
.blank svg { |
||||
width: 3rem; |
||||
height: 3rem; |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
.content { |
||||
flex: 1 1 auto; |
||||
overflow: auto; |
||||
background-color: #f7faff; |
||||
width: 100%; |
||||
padding: 2rem; |
||||
box-sizing: border-box; |
||||
} |
||||
@media only screen and (max-width: 811px) { |
||||
.content { |
||||
padding: 0.25rem; |
||||
} |
||||
} |
||||
|
||||
.menu { |
||||
display: flex; |
||||
flex-direction: column; |
||||
font-size: 0.85rem; |
||||
justify-content: flex-start; |
||||
flex: 0 0 auto; |
||||
padding: 0; |
||||
} |
||||
@media only screen and (max-width: 840px), (max-height: 840px) { |
||||
.menu { |
||||
overflow: auto; |
||||
font: 0.75rem; |
||||
} |
||||
} |
||||
.menu.menu--open .menu-item-name { |
||||
display: block; |
||||
} |
||||
|
||||
.menu-toggle { |
||||
transition: all 500ms; |
||||
padding: 1rem; |
||||
text-align: center; |
||||
border-bottom: 1px solid #e6ecf1; |
||||
cursor: pointer; |
||||
} |
||||
.menu-toggle svg { |
||||
transition: all 250ms ease-out 50ms; |
||||
transform-origin: center center; |
||||
transform: scaleX(1); |
||||
} |
||||
.menu.menu--open .menu-toggle svg { |
||||
transform: scaleX(-1); |
||||
} |
||||
|
||||
.menu-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 0.5rem 1rem; |
||||
cursor: pointer; |
||||
user-select: none; |
||||
position: relative; |
||||
text-align: left; |
||||
} |
||||
.menu-item:hover { |
||||
background: #f7faff; |
||||
} |
||||
.menu-item:hover:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 1rem; |
||||
height: 1rem; |
||||
bottom: 2rem; |
||||
left: 2.5rem; |
||||
position: absolute; |
||||
background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), #0085c7; |
||||
background-position: center; |
||||
background-size: 50% 2px, 2px 50%; /*thickness = 2px, length = 50% (25px)*/ |
||||
background-repeat: no-repeat; |
||||
border-radius: 50%; |
||||
box-shadow: 0 1px 2px rgba(55, 63, 66, 0.07), 0 2px 4px rgba(55, 63, 66, 0.07), 0 4px 8px rgba(55, 63, 66, 0.07), |
||||
0 8px 16px rgba(55, 63, 66, 0.07), 0 16px 24px rgba(55, 63, 66, 0.07), 0 24px 32px rgba(55, 63, 66, 0.07); |
||||
} |
||||
.menu-item-name { |
||||
margin: 0 0.5rem 0 1rem; |
||||
white-space: nowrap; |
||||
display: none; |
||||
} |
||||
@media only screen and (max-width: 840px), (max-height: 840px) { |
||||
.menu-toggle { |
||||
padding: 1rem 0; |
||||
} |
||||
.menu-item { |
||||
padding: 0.5rem; |
||||
} |
||||
.menu-item:hover:before { |
||||
bottom: 1rem; |
||||
left: 1rem; |
||||
} |
||||
.menu-item svg { |
||||
width: 32px; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
/* dashboard and tiles */ |
||||
.dashboard { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
margin: auto; |
||||
height: 100%; |
||||
} |
||||
|
||||
.table { |
||||
margin: 0; |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
} |
||||
|
||||
.table td { |
||||
padding: 0.15rem 0.5rem; |
||||
font-size: 0.75rem; |
||||
white-space: nowrap; |
||||
width: 1.5rem; |
||||
} |
||||
|
||||
.table td:first-child { |
||||
width: 4rem; |
||||
} |
||||
|
||||
.table td:last-child { |
||||
width: auto; |
||||
} |
||||
|
||||
.tile { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: 0 0 auto; |
||||
width: calc(25% - 1rem); |
||||
margin: 0.5rem; |
||||
height: 50vh; |
||||
max-height: calc(50% - 1rem); |
||||
overflow: hidden; |
||||
background: white; |
||||
page-break-inside: avoid; /* important when printing the dashboard */ |
||||
transition: all 250ms; |
||||
border-radius: 0.5rem; |
||||
box-sizing: border-box; |
||||
box-shadow: 0 1px 2px rgba(55, 63, 66, 0.07), 0 2px 4px rgba(55, 63, 66, 0.07), 0 4px 8px rgba(55, 63, 66, 0.07), |
||||
0 8px 16px rgba(55, 63, 66, 0.07), 0 16px 24px rgba(55, 63, 66, 0.07), 0 24px 32px rgba(55, 63, 66, 0.07); |
||||
} |
||||
@media only screen and (max-width: 1599px) { |
||||
.tile { |
||||
width: calc(33.33% - 1rem); |
||||
} |
||||
} |
||||
@media only screen and (max-width: 1079px) { |
||||
.tile { |
||||
width: calc(50% - 1rem); |
||||
} |
||||
} |
||||
@media only screen and (max-width: 1023px) { |
||||
.tile { |
||||
width: calc(100% - 1rem); |
||||
} |
||||
} |
||||
@media only screen and (max-height: 800px) { |
||||
.tile { |
||||
max-height: 400px; |
||||
} |
||||
} |
||||
.tile:last-child { |
||||
flex: 1 1 auto; |
||||
} |
||||
.tile:hover { |
||||
border-color: #adb7bd; |
||||
} |
||||
.tile.drag-over { |
||||
border: 2px dashed #000; |
||||
} |
||||
|
||||
.tile .buttons { |
||||
transition: all 250ms; |
||||
opacity: 0; |
||||
} |
||||
@media (hover: none) and (pointer: coarse) { |
||||
.tile .buttons { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.tile:hover .buttons { |
||||
opacity: 1; |
||||
} |
||||
.tile .buttons > span { |
||||
padding: 0 0.5rem; |
||||
cursor: pointer; |
||||
} |
||||
.tile.drag-over { |
||||
border: 2px dashed #000; |
||||
background-color: rgba(0, 0, 0, 0.1); |
||||
transition: all 250ms; |
||||
} |
||||
.tile.drag-source { |
||||
opacity: 0.4; |
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); |
||||
background-color: rgba(145, 200, 248, 0.75); |
||||
transform: scale(0.9); |
||||
transition: all 250ms; |
||||
} |
||||
|
||||
.tile .tile-container { |
||||
border-bottom: 1px solid #e0e0e0; |
||||
padding: 0.75rem 1rem; |
||||
display: flex; |
||||
cursor: move; |
||||
} |
||||
|
||||
.tile .tile-header { |
||||
flex-grow: 1; |
||||
font-size: 1rem; |
||||
font-weight: 400; |
||||
padding: 0.125rem; |
||||
opacity: 0.75; |
||||
} |
||||
|
||||
.tile .tile-content { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
flex: 1 1 auto; |
||||
overflow: auto; |
||||
height: 100%; |
||||
} |
||||
|
||||
.tile .blank-tile { |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
/* tile content */ |
||||
|
||||
.wj-flexgrid { |
||||
border: none; |
||||
height: 100%; |
||||
} |
||||
|
||||
.wj-flexgrid .wj-cell { |
||||
border-right: none; |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
||||
padding: 0.35rem 1rem; |
||||
font-size: 0.8125rem; |
||||
} |
||||
|
||||
.wj-flexchart { |
||||
background: transparent; |
||||
height: calc(100%); |
||||
width: 100%; |
||||
border: none; |
||||
padding: 1rem; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
} |
||||
.wj-radialgauge { |
||||
width: 60%; |
||||
max-width: 300px; |
||||
padding: 1rem; |
||||
overflow: hidden; |
||||
} |
||||
.wj-radialgauge .wj-value { |
||||
font-size: 0.75rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.wj-lineargauge { |
||||
max-height: 1rem; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.wj-gauge .wj-face path { |
||||
stroke: none; |
||||
} |
||||
|
||||
.wj-ranges { |
||||
opacity: 0.15; |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import './license'; |
||||
// Wijmo and Material Design Lite |
||||
import '@grapecity/wijmo.styles/themes/material/wijmo.theme.material.indigo-amber.css'; |
||||
// Styles |
||||
import './index.css'; |
||||
//React |
||||
import * as React from 'react'; |
||||
import * as ReactDOM from 'react-dom'; |
||||
import { App } from './App'; |
||||
ReactDOM.render(React.createElement(App), document.getElementById('app')); |
||||
@ -0,0 +1,2 @@
|
||||
import { setLicenseKey } from '@grapecity/wijmo'; |
||||
setLicenseKey('GrapeCity,427351286422477#B0JoIIklkIs4nIzYXMyAjMiojIyVmdiwSZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQvAVW7ZWbqNjeWZzRh9Ucl5UTuZVaCR7ZpB5UH9EVC3kaqJWZ0pnasJ7Q9I4bB3GR0F6aIt6NZ96MFN4aotEZrUXe4kHUlllerlGb9dDSPhEcFFmclJXd8syNEtENzMTOBNVYpFje6lDUlBlbkdmcNNGOrAHR9pXNSl6NpVkbCNWUxlkZ7o7QT3icHNGavFXdapWQDZ5KsN5N7dDcyRUW85ESFBlb4JUZq3GWlBldXBzU0hjW9wkb8cncopnSOBjNkJFdyNmSqB7YVlnNzpnb9BDSMllTSFDaNFjca54dtBXatlEdS5mVNV6dxIEN7RUNxYGSvU7KIdndPpENvlXW6hzbCh7RsZ7YLJzboNnU7ZERTRkVBNlN7RWSGhDVrdmZqZ4cq94aFpkbWZDMGBHdVZ5YwUTTIdlN0RnVvMDdFJzbQt6bolDM5NkdrsUO536LrNWSotmI0IyUiwiIDRTR4MjM9QjI0ICSiwSMyIjM9UTMwEjM0IicfJye35XX3JSSwIjUiojIDJCLi86bpNnblRHeFBCI4VWZoNFelxmRg2Wbql6ViojIOJyes4nI5kkTRJiOiMkIsIibvl6cuVGd8VEIgIXZ7VWaWRncvBXZSBybtpWaXJiOi8kI1xSfis4N8gkI0IyQiwiIu3Waz9WZ4hXRgAydvJVa4xWdNBybtpWaXJiOi8kI1xSfiQjR6QkI0IyQiwiIu3Waz9WZ4hXRgACUBx4TgAybtpWaXJiOi8kI1xSfiMzQwIkI0IyQiwiIlJ7bDBybtpWaXJiOi8kI1xSfiUFO7EkI0IyQiwiIu3Waz9WZ4hXRgACdyFGaDxWYpNmbh9WaGBybtpWaXJiOi8kI1tlOiQmcQJCLiETMwAzNwACOwcDMwIDMyIiOiQncDJCLi46bj9idlRWe4l6YlBXYydmLqwibj9SbvNmL9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKsI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwiI7cDNyIDN6gjMxUzMdI6N'); |
||||
@ -0,0 +1,370 @@
|
||||
import * as wjcCore from '@grapecity/wijmo'; |
||||
/** |
||||
* Object used to hold the data that is being dragged during drag and drop operations. |
||||
* |
||||
* It may hold one or more data items of different types. For more information about |
||||
* drag and drop operations and data transfer objects, see |
||||
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">HTML Drag and Drop API</a>. |
||||
* |
||||
* This object is created automatically by the @see:DragDropTouch singleton and is |
||||
* accessible through the @see:dataTransfer property of all drag events. |
||||
*/ |
||||
export class DataTransfer { |
||||
constructor() { |
||||
this._dropEffect = 'move'; |
||||
this._effectAllowed = 'all'; |
||||
this._data = {}; |
||||
} |
||||
/** |
||||
* Gets or sets the type of drag-and-drop operation currently selected. |
||||
* The value must be 'none', 'copy', 'link', or 'move'. |
||||
*/ |
||||
get dropEffect() { |
||||
return this._dropEffect; |
||||
} |
||||
set dropEffect(value) { |
||||
this._dropEffect = wjcCore.asString(value); |
||||
} |
||||
/** |
||||
* Gets or sets the types of operations that are possible. |
||||
* Must be one of 'none', 'copy', 'copyLink', 'copyMove', 'link', |
||||
* 'linkMove', 'move', 'all' or 'uninitialized'. |
||||
*/ |
||||
get effectAllowed() { |
||||
return this._effectAllowed; |
||||
} |
||||
set effectAllowed(value) { |
||||
this._effectAllowed = wjcCore.asString(value); |
||||
} |
||||
/** |
||||
* Gets an array of strings giving the formats that were set in the @see:dragstart event. |
||||
*/ |
||||
get types() { |
||||
return Object.keys(this._data); |
||||
} |
||||
/** |
||||
* Removes the data associated with a given type. |
||||
* |
||||
* The type argument is optional. If the type is empty or not specified, the data |
||||
* associated with all types is removed. If data for the specified type does not exist, |
||||
* or the data transfer contains no data, this method will have no effect. |
||||
* |
||||
* @param type Type of data to remove. |
||||
*/ |
||||
clearData(type) { |
||||
if (type != null) { |
||||
delete this._data[type]; |
||||
} |
||||
else { |
||||
this._data = null; |
||||
} |
||||
} |
||||
/** |
||||
* Retrieves the data for a given type, or an empty string if data for that type does |
||||
* not exist or the data transfer contains no data. |
||||
* |
||||
* @param type Type of data to retrieve. |
||||
*/ |
||||
getData(type) { |
||||
return this._data[type] || ''; |
||||
} |
||||
/** |
||||
* Set the data for a given type. |
||||
* |
||||
* For a list of recommended drag types, please see |
||||
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types.
|
||||
* |
||||
* @param type Type of data to add. |
||||
* @param value Data to add. |
||||
*/ |
||||
setData(type, value) { |
||||
this._data[type] = value; |
||||
} |
||||
/** |
||||
* Set the image to be used for dragging if a custom one is desired. |
||||
* |
||||
* @param img An image element to use as the drag feedback image. |
||||
* @param offsetX The horizontal offset within the image. |
||||
* @param offsetY The vertical offset within the image. |
||||
*/ |
||||
setDragImage(img, offsetX, offsetY) { |
||||
var ddt = DragDropTouch._instance; |
||||
ddt._imgCustom = img; |
||||
ddt._imgOffset = new wjcCore.Point(offsetX, offsetY); |
||||
} |
||||
} |
||||
/** |
||||
* Defines a class that adds support for touch-based HTML5 drag/drop operations. |
||||
* |
||||
* The @see:DragDropTouch class listens to touch events and raises the |
||||
* appropriate HTML5 drag/drop events as if the events had been caused |
||||
* by mouse actions. |
||||
* |
||||
* The purpose of this class is to enable using existing, standard HTML5 |
||||
* drag/drop code on mobile devices running IOS or Android. |
||||
* |
||||
* To use, include the DragDropTouch.js file on the page. The class will |
||||
* automatically start monitoring touch events and will raise the HTML5 |
||||
* drag drop events (dragstart, dragenter, dragleave, drop, dragend) which |
||||
* should be handled by the application. |
||||
* |
||||
* For details and examples on HTML drag and drop, see |
||||
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations.
|
||||
*/ |
||||
export class DragDropTouch { |
||||
/** |
||||
* Initializes the single instance of the @see:DragDropTouch class. |
||||
*/ |
||||
constructor() { |
||||
this._lastClick = 0; |
||||
// enforce singleton pattern
|
||||
wjcCore.assert(!DragDropTouch._instance, 'DragDropTouch instance already created.'); |
||||
// listen to touch events
|
||||
if ('ontouchstart' in document) { |
||||
var d = document, ts = this._touchstart.bind(this), tm = this._touchmove.bind(this), te = this._touchend.bind(this); |
||||
d.addEventListener('touchstart', ts); |
||||
d.addEventListener('touchmove', tm); |
||||
d.addEventListener('touchend', te); |
||||
d.addEventListener('touchcancel', te); |
||||
} |
||||
} |
||||
/** |
||||
* Gets a reference to the @see:DragDropTouch singleton. |
||||
*/ |
||||
static getInstance() { |
||||
return DragDropTouch._instance; |
||||
} |
||||
// ** event handlers
|
||||
_touchstart(e) { |
||||
if (this._shouldHandle(e)) { |
||||
// raise double-click and prevent zooming
|
||||
if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) { |
||||
if (this._dispatchEvent(e, 'dblclick', e.target)) { |
||||
e.preventDefault(); |
||||
this._reset(); |
||||
return; |
||||
} |
||||
} |
||||
// clear all variables
|
||||
this._reset(); |
||||
// get nearest draggable element
|
||||
var src = wjcCore.closest(e.target, '[draggable]'); |
||||
if (src) { |
||||
// give caller a chance to handle the hover/move events
|
||||
if (!this._dispatchEvent(e, 'mousemove', e.target) && |
||||
!this._dispatchEvent(e, 'mousedown', e.target)) { |
||||
// get ready to start dragging
|
||||
this._dragSource = src; |
||||
this._ptDown = this._getPoint(e); |
||||
this._lastTouch = e; |
||||
e.preventDefault(); |
||||
// show context menu if the user hasn't started dragging after a while
|
||||
setTimeout(() => { |
||||
if (this._dragSource == src && this._img == null) { |
||||
if (this._dispatchEvent(e, 'contextmenu', src)) { |
||||
this._reset(); |
||||
} |
||||
} |
||||
}, DragDropTouch._CTXMENU); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
_touchmove(e) { |
||||
if (this._shouldHandle(e)) { |
||||
// see if target wants to handle move
|
||||
var target = this._getTarget(e); |
||||
if (this._dispatchEvent(e, 'mousemove', target)) { |
||||
this._lastTouch = e; |
||||
e.preventDefault(); |
||||
return; |
||||
} |
||||
// start dragging
|
||||
if (this._dragSource && !this._img) { |
||||
var delta = this._getDelta(e); |
||||
if (delta > DragDropTouch._THRESHOLD) { |
||||
this._dispatchEvent(e, 'dragstart', this._dragSource); |
||||
this._createImage(e); |
||||
this._dispatchEvent(e, 'dragenter', target); |
||||
} |
||||
} |
||||
// continue dragging
|
||||
if (this._img) { |
||||
this._lastTouch = e; |
||||
e.preventDefault(); // prevent scrolling
|
||||
if (target != this._lastTarget) { |
||||
this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget); |
||||
this._dispatchEvent(e, 'dragenter', target); |
||||
this._lastTarget = target; |
||||
} |
||||
this._moveImage(e); |
||||
this._dispatchEvent(e, 'dragover', target); |
||||
} |
||||
} |
||||
} |
||||
_touchend(e) { |
||||
if (this._shouldHandle(e)) { |
||||
// see if target wants to handle up
|
||||
if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) { |
||||
e.preventDefault(); |
||||
return; |
||||
} |
||||
// user clicked the element but didn't drag, so clear the source and simulate a click
|
||||
if (!this._img) { |
||||
this._dragSource = null; |
||||
this._dispatchEvent(this._lastTouch, 'click', e.target); |
||||
this._lastClick = Date.now(); |
||||
} |
||||
// finish dragging
|
||||
this._destroyImage(); |
||||
if (this._dragSource) { |
||||
if (e.type.indexOf('cancel') < 0) { |
||||
this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget); |
||||
} |
||||
this._dispatchEvent(this._lastTouch, 'dragend', this._dragSource); |
||||
this._reset(); |
||||
} |
||||
} |
||||
} |
||||
// ** utilities
|
||||
// ignore events that have been handled or that involve more than one touch
|
||||
_shouldHandle(e) { |
||||
return e && |
||||
!e.defaultPrevented && |
||||
e.touches && e.touches.length < 2; |
||||
} |
||||
// clear all members
|
||||
_reset() { |
||||
this._destroyImage(); |
||||
this._dragSource = null; |
||||
this._lastTouch = null; |
||||
this._lastTarget = null; |
||||
this._ptDown = null; |
||||
this._dataTransfer = new DataTransfer(); |
||||
} |
||||
// get point for a touch event
|
||||
_getPoint(e, page) { |
||||
if (e && e.touches) { |
||||
e = e.touches[0]; |
||||
} |
||||
wjcCore.assert(e && ('clientX' in e), 'invalid event?'); |
||||
if (page == true) { |
||||
return new wjcCore.Point(e.pageX, e.pageY); |
||||
} |
||||
else { |
||||
return new wjcCore.Point(e.clientX, e.clientY); |
||||
} |
||||
} |
||||
// get distance between the current touch event and the first one
|
||||
_getDelta(e) { |
||||
var p = this._getPoint(e); |
||||
return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y); |
||||
} |
||||
// get the element at a given touch event
|
||||
_getTarget(e) { |
||||
var pt = this._getPoint(e), el = document.elementFromPoint(pt.x, pt.y); |
||||
while (el && getComputedStyle(el).pointerEvents == 'none') { |
||||
el = el.parentElement; |
||||
} |
||||
return el; |
||||
} |
||||
// create drag image from source element
|
||||
_createImage(e) { |
||||
// just in case...
|
||||
if (this._img) { |
||||
this._destroyImage(); |
||||
} |
||||
// create drag image from custom element or drag source
|
||||
var src = this._imgCustom || this._dragSource; |
||||
this._img = src.cloneNode(true); |
||||
this._copyStyle(src, this._img); |
||||
this._img.style.top = this._img.style.left = '-9999px'; |
||||
// if creating from drag source, apply offset and opacity
|
||||
if (!this._imgCustom) { |
||||
var rc = src.getBoundingClientRect(), pt = this._getPoint(e); |
||||
this._imgOffset = new wjcCore.Point(pt.x - rc.left, pt.y - rc.top); |
||||
this._img.style.opacity = DragDropTouch._OPACITY.toString(); |
||||
} |
||||
// add image to document
|
||||
this._moveImage(e); |
||||
document.body.appendChild(this._img); |
||||
} |
||||
// dispose of drag image element
|
||||
_destroyImage() { |
||||
if (this._img && this._img.parentElement) { |
||||
this._img.parentElement.removeChild(this._img); |
||||
} |
||||
this._img = null; |
||||
this._imgCustom = null; |
||||
} |
||||
// move the drag image element
|
||||
_moveImage(e) { |
||||
requestAnimationFrame(() => { |
||||
var pt = this._getPoint(e, true); |
||||
wjcCore.setCss(this._img, { |
||||
position: 'absolute', |
||||
pointerEvents: 'none', |
||||
zIndex: 999999, |
||||
left: Math.round(pt.x - this._imgOffset.x), |
||||
top: Math.round(pt.y - this._imgOffset.y) |
||||
}); |
||||
}); |
||||
} |
||||
// copy properties from an object to another
|
||||
_copyProps(dst, src, props) { |
||||
for (var i = 0; i < props.length; i++) { |
||||
var p = props[i]; |
||||
dst[p] = src[p]; |
||||
} |
||||
} |
||||
_copyStyle(src, dst) { |
||||
// remove potentially troublesome attributes
|
||||
DragDropTouch._rmvAtts.forEach(function (att) { |
||||
dst.removeAttribute(att); |
||||
}); |
||||
// copy canvas content
|
||||
if (src instanceof HTMLCanvasElement) { |
||||
var cSrc = src, cDst = dst; |
||||
cDst.width = cSrc.width; |
||||
cDst.height = cSrc.height; |
||||
cDst.getContext('2d').drawImage(cSrc, 0, 0); |
||||
} |
||||
// copy style
|
||||
var cs = getComputedStyle(src); |
||||
for (var i = 0; i < cs.length; i++) { |
||||
var key = cs[i]; |
||||
dst.style[key] = cs[key]; |
||||
} |
||||
dst.style.pointerEvents = 'none'; |
||||
// and repeat for all children
|
||||
for (var i = 0; i < src.children.length; i++) { |
||||
this._copyStyle(src.children[i], dst.children[i]); |
||||
} |
||||
} |
||||
_dispatchEvent(e, type, target) { |
||||
if (e && target) { |
||||
var evt = document.createEvent('Event'), t = e.touches ? e.touches[0] : e; |
||||
evt.initEvent(type, true, true); |
||||
evt.button = 0; |
||||
evt.which = evt.buttons = 1; |
||||
this._copyProps(evt, e, DragDropTouch._kbdProps); |
||||
this._copyProps(evt, t, DragDropTouch._ptProps); |
||||
evt.dataTransfer = this._dataTransfer; |
||||
target.dispatchEvent(evt); |
||||
return evt.defaultPrevented; |
||||
} |
||||
return false; |
||||
} |
||||
} |
||||
/*private*/ DragDropTouch._instance = new DragDropTouch(); // singleton
|
||||
// constants
|
||||
DragDropTouch._THRESHOLD = 5; // pixels to move before drag starts
|
||||
DragDropTouch._OPACITY = 0.5; // drag image opacity
|
||||
DragDropTouch._DBLCLICK = 500; // max ms between clicks in a double click
|
||||
DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event
|
||||
// copy styles/attributes from drag source to drag image element
|
||||
DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(','); |
||||
// synthesize and dispatch an event
|
||||
// returns true if the event has been handled (e.preventDefault == true)
|
||||
DragDropTouch._kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(','); |
||||
DragDropTouch._ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY'.split(','); |
||||
Loading…
Reference in new issue