デモで学ぶ業務アプリのUI開発（5） – キャンペーン分析ダッシュボード（BIツール風）

const conversionGridInit = useCallback((grid) => {
   ・・・途中省略・・・
    const c2 = new Column();
    c2.binding = 'estrellas';
    c2.header = '評価';
    c2.width = 200;
    c2.align = 'center';
   //CellMakerクラスでレーティングを設定
   c2.cellTemplate = CellMaker.makeRating({
        range: [1, 5],
        label: ''
    });
   ・・・
}, []);

var theGrid = new wjGrid.FlexGrid('#theGrid', {
  　・・・
    formatItem: function (s, e) {
        if (e.panel == s.cells) {
            var item = s.rows[e.row].dataItem;
            switch (s.columns[e.col].binding) {
                case 'rating':
                    formatRatingCell(e.cell, item.rating);
                    break;
                ・・・
            }
        }
    }
});

 ・・・
function formatRatingCell(cell, rating) {
    var html = '<div aria-label="レーティング:星' + rating + ' 個">';
    for (var i = 0; i < rating; i++) {
        html += '<span class="glyphicon glyphicon-star"></span>';
    }
    html += '</div>';
    cell.innerHTML = html;
}

//データソースの設定部分
if (!tab3CityView.current) {
    tab3CityView.current = new CollectionView([]);
    const cityGroup = new PropertyGroupDescription('city');
    tab3CityView.current.groupDescriptions.push(cityGroup);
}

・・・テンプレート部分・・・
    {/* 右: 地域・担当会社別 AxisGroups 横棒チャート */}
    <div className="bi-panel bi-tab3-city-panel">
        <div className="bi-panel-title">地域・担当会社別提案数</div>
        <wjChart.FlexChart 
            className="bi-tab3-city-chart"
            itemsSource={tab3CityView.current} 
            bindingX="company" chartType="Bar" 
            legend={{ position: Position.None }} 
            palette={['#4a72c4']} 
            initialized={(chart) => {
                chart.axisY.groupsOptions = { display: AxisGroupsDisplay.Show };
                chart.axisX.axisLine = true;
                chart.axisX.min = 0;
                if (tab3CityView.current)
                    tab3CityView.current.sourceCollection = tab3Data.cityCompanyData;
            }}>
            <wjChart.FlexChartSeries binding="value" name="件数" />
        </wjChart.FlexChart>
    </div>

const defs = [
    { binding: 'name', header: 'セグメント', width: 150 },
    { binding: 'count', header: '登録件数', width: 110, align: 'right', format: 'n0' },
    { binding: 'ratioPct', header: '構成比 %', width: 100, align: 'right', format: 'p0' },
    { binding: 'convRate', header: '転換率 %', width: 100, align: 'right', format: 'p0' },
    ・・・
];
defs.forEach(({ binding, header, width, align, format }) => {
    const c = new Column();
    ・・・
    if (format)
        c.format = format;
    grid.columns.push(c);
});

//データソース設定
const row = (label, fmt, keyName, total) => ({
    label, fmt,
    campA: v('春季新規獲得', keyName),
    campB: v('夏季ファン層拡大', keyName),
    campC: v('秋冬リテンション', keyName),
    total,
});
const inputRows = [
    row('イニシャティブコストの合計', 'currency', 'cost', totCost),
    row('ターゲットオーディエンス（人）', 'number', 'audience', sum('audience')),
    row('転化率（リード生成率）%', 'percent', 'leadRate', null),
    row('コンバージョン率（購入率）%', 'percent', 'convRate', null),
    row('1販売あたりの平均収益', 'currency', 'revPerSale', totRevPS),
    row('1販売あたりの平均利益', 'currency', 'profitPerSale', totProfPS),
];

//formatItemイベントの処理
const formatRoiItem = useCallback((sender, e) => {
    var _a, _b;
    if (e.panel.cellType !== 1)
        return;
    const item = (_a = e.panel.rows[e.row]) === null || _a === void 0 ? void 0 : _a.dataItem;
   ・・・
   //fmtからテキストに設定する文字列を判断する
    switch (item.fmt) {
        case 'currency':
            e.cell.textContent = val === 0 ? '-' : '¥' + val.toLocaleString('ja-JP', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
            break;
        case 'percent':
            e.cell.textContent = val === 0 ? '-' : val.toFixed(2) + ' %';
            break;
        case 'number':
            e.cell.textContent = val.toLocaleString('ja-JP');
            break;
        default: break;
    }
}, []);