wahyu
10 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