課題管理ダッシュボード | 使用例 | Wijmo（ウィジモ）デモアプリケーション | Developer Solutions〈開発支援ツール〉

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import * as wjInput from '@mescius/wijmo.input';
import './styles.css';
import { ShowText, RadialGauge, } from "@mescius/wijmo.gauge";
import { getChartData, gettreemapData, getPieChartData, getlineChartData, getListData, getSurveyResult, getlineChartData2 } from './data';
import * as chart from '@mescius/wijmo.chart';
import { TreeMap } from '@mescius/wijmo.chart.hierarchical';
import "@mescius/wijmo.cultures/wijmo.culture.ja";
import * as wjCore from '@mescius/wijmo';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
let issuesGauge = new RadialGauge('#issues', {
min: 0,
max: 1,
value: 0.7542,
startAngle: -180,
sweepAngle: 360,
showText: ShowText.Value,
stackRanges: true,
face: {
thickness: 0.3
},
pointer: {
thickness: 0.3
},
format: 'p2'
});
let barcissuesTypeCharthart = new chart.FlexChart('#issuesTypeChart', {
chartType: chart.ChartType.Bar,
bindingX: 'system',
series: [{
binding: 'resolved',
name: '解決済み'
}, {
binding: 'progress',
name: '進行中'
}, {
binding: 'notstart',
name: '未対応'
}],
stacking: chart.Stacking.Stacked,
axisY: {
reversed: true
},
itemsSource: getChartData(),
legend: { position: 'Right' },
palette: [
'rgba(20,136,110,1)', 'rgba(200,180,34,1)', 'rgba(181,72,54,1)'
]
});
let treemap = new TreeMap('#treechart', {
binding: 'sales',
bindingName: ['category', 'subCategory'],
itemsSource: gettreemapData(),
dataLabel: {
position: 'Center',
content: '{name}'
},
tooltip: {
popup: (s, e) => {
e.cancel = true;
}
},
palette: [
'#66a2cc', '#cc6666', '#9bcc66', '#cccc66', '#367eb2', '#ffc000'
]
});
let data = getPieChartData();
let pie = new chart.FlexPie('#pieChart', {
bindingName: 'region',
binding: 'count',
innerRadius: 0.7,
startAngle: 13,
legend: { position: chart.Position.Bottom },
tooltip: {
content: (hti) => {
let item = hti.item;
return `<b>地域: </b>${item.region} </br><b>報告数: </b>: ${item.count}件</br>`;
}
},
itemsSource: data
});
let surveyResult = getSurveyResult();
let pie2 = new chart.FlexPie('#pieChart2', {
bindingName: 'answer',
binding: 'value',
startAngle: 30,
tooltip: {
content: (hti) => {
let item = hti.item;
let addmessage = item.answer === '大変不満' ? '至急、レポートを確認してください。' : item.answer === 'やや不満' ? '本日中にレポートを確認してください。' : '';
return `<b>${item.answer}: ${item.value}％ </b> </br> ${addmessage}`;
}
},
itemsSource: surveyResult,
palette: chart.Palettes.flatly
});
let linechart = new chart.FlexChart('#linechart', {
legend: {
position: chart.Position.Bottom
},
chartType: chart.ChartType.Line,
bindingX: 'month',
series: [{
binding: 'thisYear',
name: '2023'
}, {
binding: 'lastYear',
name: '2022'
}, {
binding: 'yearbeforelast',
name: '2021'
}],
axisY: {
title: '発生件数'
},
itemsSource: getlineChartData(),
palette: ['rgba(42,159,214,1)', 'rgba(119,179,0,1)', 'rgba(153,51,204,1)']
});
let template = '<div class="item">' +
'概要：{outline}<br/>' +
'対象システム：{system}<br/>' +
'緊急度：{priority}<br/>' +
'発生時刻: {time}<br/>' +
'担当者: {person}<br/>' +
'</div>';
let theListBox = new wjInput.ListBox('#theListBox', {
formatItem: (sender, e) => {
let html = wjCore.format(template, e.data, (data, name, fmt, val) => {
return wjCore.isString(data[name]) ? wjCore.escapeHtml(data[name]) : val;
});
e.item.innerHTML = html;
},
itemsSource: getListData()
});
// create the chart
let lineChart2 = new chart.FlexChart('#lineChart2', {
chartType: chart.ChartType.Line,
bindingX: 'x',
series: [{
binding: 'y'
}],
axisX: {
position: chart.Position.None
},
axisY: {
min: 0,
max: 100,
title: '負荷率（％）'
},
itemsSource: getlineChartData2(200)
});
//
// start changing the data
function addPoints() {
// append new points, remove old points
let arr = lineChart2.collectionView.sourceCollection, pt = arr[arr.length - 1], y = Math.random() * 100;
//
arr.push({ x: pt.x + 1, y: y });
arr.splice(0, 1);
//
// update chart
lineChart2.collectionView.refresh();
//
// and keep updating
setTimeout(function () {
addPoints();
}, 500);
}
//
addPoints();
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo IssueaManagementDashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div>
<div>
<div class="cards">
<div class="tile">
<div class="tile-container">
<div class="tile-header">本日の対応状況</div>
</div>
<div class="tile-content">
<div id="issues"></div>
<div class="resolvedCount">
解決済み 66 件
<br>
総件数 88 件
</div>
</div>
</div>
<div class="tile">
<div class="tile-container">
<div class="tile-header">システム別分類</div>
</div>
<div class="tile-content">
<div id="issuesTypeChart"></div>
</div>
</div>
<div class="tile" id="largeTile">
<div class="tile-container">
<div class="tile-header">障害区分</div>
</div>
<div class="tile-content">
<div id="treechart"></div>
</div>
</div>
<div class="tile">
<div class="tile-container">
<div class="tile-header">地域別分類</div>
</div>
<div class="tile-content">
<div id="pieChart">
</div>
</div>
</div>
<div class="tile">
<div class="tile-container">
<div class="tile-header">負荷状況</div>
</div>
<div class="tile-content">
<div id="lineChart2"></div>
</div>
</div>
<div class="tile">
<div class="tile-container">
<div class="tile-header">アンケート結果</div>
</div>
<div class="tile-content">
<div id="pieChart2">
</div>
</div>
</div>
<div class="tile">
<div class="tile-container">
<div class="tile-header">直近のレポート</div>
</div>
<div class="tile-content">
<div id="theListBox"></div>
</div>
</div>
<div class="tile" id="largeTile">
<div class="tile-container">
<div class="tile-header">年間トレンド</div>
</div>
<div class="tile-content">
<div id="linechart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

import * as core from '@mescius/wijmo';
export function getChartData() {
return [
{
'system': 'ERP',
'resolved': 15,
'progress': 4,
'notstart': 3,
}, {
'system': 'WMS',
'resolved': 20,
'progress': 3,
'notstart': 2,
}, {
'system': 'CRM',
'resolved': 18,
'progress': 2,
'notstart': 2,
}, {
'system': 'DMP',
'resolved': 13,
'progress': 4,
'notstart': 2,
}
];
}
export function gettreemapData() {
let data = [];
for (let i = 0; i < 1000; i++) {
let catIndex = Math.floor(Math.random() * categories.length), subCategory = subCategories[catIndex], subIndex = Math.floor(Math.random() * subCategory.length);
data.push({
category: categories[catIndex],
subCategory: subCategory[subIndex],
sales: 5000
});
}
let cv = new core.CollectionView(data);
cv.groupDescriptions.push(new core.PropertyGroupDescription('category'));
cv.groupDescriptions.push(new core.PropertyGroupDescription('subCategory'));
return cv;
}
// generate data for the sample
let categories = ['クライアント', 'サーバー', 'アカウント', '認証', '環境依存', 'その他', '未分類'];
let subCategories = [
['11'],
['16'],
['13'],
['10'],
['8'],
['9'],
['21']
];
function getSales() {
return Math.round(Math.random() * 100);
}
export function getPieChartData() {
return [
{ region: '北海道', count: 8 },
{ region: '東北', count: 7 },
{ region: '関東', count: 15 },
{ region: '中部', count: 10 },
{ region: '近畿', count: 13 },
{ region: '中国・四国', count: 8 },
{ region: '九州', count: 9 },
];
}
export function getlineChartData() {
return [
{ month: '1月', thisYear: 480, lastYear: 438, yearbeforelast: 420 },
{ month: '2月', thisYear: 428, lastYear: 420, yearbeforelast: 478 },
{ month: '3月', thisYear: 521, lastYear: 488, yearbeforelast: 513 },
{ month: '4月', thisYear: 478, lastYear: 533, yearbeforelast: 510 },
{ month: '5月', thisYear: 412, lastYear: 475, yearbeforelast: 498 },
{ month: '6月', thisYear: 504, lastYear: 530, yearbeforelast: 465 },
{ month: '7月', thisYear: 460, lastYear: 499, yearbeforelast: 504 },
{ month: '8月', thisYear: 478, lastYear: 410, yearbeforelast: 522 },
{ month: '9月', thisYear: 448, lastYear: 503, yearbeforelast: 498 },
{ month: '10月', thisYear: 461, lastYear: 422, yearbeforelast: 465 },
{ month: '11月', thisYear: 513, lastYear: 463, yearbeforelast: 435 },
{ month: '12月', thisYear: 479, lastYear: 510, yearbeforelast: 488 },
];
}
let date1 = new Date(), date2 = new Date(), date3 = new Date(), date4 = new Date(), date5 = new Date(), date6 = new Date();
date1.setHours(date1.getHours() - 3);
date1.setSeconds(date1.getSeconds() - 3);
date2.setHours(date2.getHours() - 13);
date2.setMinutes(date2.getMinutes() - 13);
date3.setHours(date3.getHours() - 9);
date3.setSeconds(date3.getSeconds() - 15);
date3.setMinutes(date3.getMinutes() - 13);
date4.setHours(date4.getHours() - 4);
date4.setMinutes(date4.getMinutes() - 20);
date5.setHours(date5.getHours() - 17);
date5.setSeconds(date5.getSeconds() - 45);
export function getListData() {
return [{
outline: 'FirefoxでERPにログインできない',
system: 'ERP',
priority: 'High',
time: core.Globalize.format(date1, 'F'),
person: '鈴木'
}, {
outline: 'Excelエクスポートした時にブラウザが固まる',
system: 'CRM',
priority: 'Middle',
time: core.Globalize.format(date2, 'F'),
person: '田中'
}, {
outline: '在庫の一覧を表示した時に不要なデータが表示される',
system: 'WMS',
priority: 'Middle',
time: core.Globalize.format(date3, 'F'),
person: '佐藤'
}, {
outline: 'Excelからインポートするとデータの一部が消えている',
system: 'CRM',
priority: 'High',
time: core.Globalize.format(date4, 'F'),
person: '山田'
}, {
outline: 'データの移行方法が分かりずらい',
system: 'DMP',
priority: 'Low',
time: core.Globalize.format(date5, 'F'),
person: '佐々木'
}, {
outline: '旧バージョンのデータをインポートした時、一部のデータが上書きされてしまう',
system: 'WMS',
priority: 'Middle',
time: core.Globalize.format(date6, 'F'),
person: '吉田'
},];
}
export function getSurveyResult() {
return [
{ answer: '大変満足', value: 16 },
{ answer: 'やや満足', value: 26 },
{ answer: '普通', value: 33 },
{ answer: 'やや不満', value: 17 },
{ answer: '大変不満', value: 8 },
];
}
// get some random data
export function getlineChartData2(cnt) {
let arr = [], y = 0;
//
for (let i = 0; i < cnt; i++) {
arr.push({ x: i, y: y });
y = Math.random() * 90;
}
//
return arr;
}

body {
background-color: rgba(21, 12, 41, 0.995);
}
.wj-radialgauge {
width: 200px;
}
.wj-flexchart {
border: none;
}
.cards {
margin: 20px 0px;
display: flex;
flex-wrap: wrap;
width: 800px;
}
.wj-gauge .wj-pointer,
.wj-gauge .wj-needle {
fill: #0050c7be;
}
.tile {
width: 45%;
height: 310px;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
margin-right: 15px;
margin-bottom: 15px;
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);
background-color: rgb(41, 41, 78);
}
#largeTile {
width: 92%;
height: 500px;
}
.tile .tile-container {
border-bottom: 1px solid #e0e0e0;
padding: 0.75rem 1rem;
color: whitesmoke;
}
.tile .tile-header {
padding: 0.125rem;
opacity: 0.75;
text-align: center;
font-size: 20px;
}
.tile .tile-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90%;
}
.resolvedCount {
position: absolute;
margin-top: 58px;
font-size: smaller;
color: whitesmoke;
}
#issuesTypeChart {
height: 270px;
width: 100%;
}
#treechart {
width: 100%;
}
.wj-data-label{
font-size: 16px;
}
.wj-flexchart .wj-data-labels .wj-data-label {
fill: whitesmoke;
}
#pieChart ,#pieChart2,#lineChart2{
height: 270px;
width: 100%;
}
#linechart {
height: 270px;
width: 100%;
}
.item {
margin: 8px;
font-size: 83%;
}
.item label {
display: inline-flex;
}
.item input[type=checkbox] {
margin: 0px;
}
.wj-listbox-item h1 {
font-size: 15pt;
font-weight: bold;
margin: 4px -8px;
}
#theListBox {
height: 255px;
width: 100%;
margin-top: -21px;
background-color: rgb(41, 41, 78);
color: whitesmoke;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
#theListBox::-webkit-scrollbar{
display:none;
}
.wj-flexchart .wj-label,
.wj-flexchart .wj-data-label {
fill: whitesmoke;
}
.wj-title {
fill: whitesmoke;
}
.wj-value {
color: whitesmoke;
}
.wj-state-selected,
.wj-state-last-selected {
background-color: rgb(41, 41, 78);
}

(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);