JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/ag-charts-enterprise.min.js?t=1749538823401"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-enterprise.min.js?t=1749538823401"></script>
<script src="http://localhost:3031/highcharts.js"></script>
<script src="http://localhost:3031/dashboards/datagrid.js"></script>

<div class="two-cols">
    <div>
        <h2>Grid</h2>
        <div id="grid" class="container"></div>
        <strong>Rendering time: <span id="grid-result"></span></strong>
    </div>
    <div>
        <h2>AG Grid</h2>
        <div id="ag-grid" class="container"></div>
        <strong>Rendering time: <span id="ag-grid-result"></span></strong>
    </div>
</div>

CSS

@import url("http://localhost:3031/dashboards/css/datagrid.css");

.two-cols {
    padding: 10px;
    display: flex;
}

.two-cols > div {
    flex: 1 1 50%;
    padding: 10px;
}

.container {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
}

JavaScript

// Data
const MAX_ROWS = 100;
const DEFAULT_INTERVAL = 1000;
const tickers = ['US10Y', 'CAD30Y', 'MUB', 'BTC-USD'];
const intruments = ['Bond', 'ETF', 'Crypto', 'Stock'];
const gridData = {
    id: [],
    ticker: [],
    timeline: [],
    instrument: [],
    quantity: [],
    purchasePrice: [],
    price: []
};
let agGridData = [];

for (let k = 0; k < MAX_ROWS; k++) {
    const index = Math.floor(Math.random() * 3);
    const quantity = Math.floor(Math.random() * 1000);
    const price = Math.floor(Math.random() * 100);
    const purchasePrice = (price - 0.23 * price).toFixed(2);
    const timeline = [];

    for (let i = 0; i < 25; i++) {
        timeline.push(Math.random() * 500);
    }

    // grid data
    gridData.id.push(k);
    gridData.ticker.push(tickers[index]);
    gridData.instrument.push(intruments[index]);
    gridData.timeline.push('[' + timeline + ']');
    gridData.quantity.push(quantity);
    gridData.price.push(price);
    gridData.purchasePrice.push(purchasePrice);

    // ag grid data
    agGridData.push({
        id: k,
        ticker: tickers[index],
        instrument: intruments[index],
        timeline: timeline,
        quantity: quantity,
        price: price,
        purchasePrice: purchasePrice
    });
}

// AG Grid

const agGridOptions = {
    columnDefs: [
        {
            field: 'id',
            cellStyle: {textAlign: 'center'},
             headerStyle: {textAlign: 'center'}
        },
        {
            field: 'ticker'
            // cellRenderer: TickerCellRenderer,
        },
        {
            headerName: 'Timeline',
            field: 'timeline',
            sortable: false,
            filter: false,
            cellRenderer: 'agSparklineCellRenderer',
            cellRendererParams: {
                sparklineOptions: {
                    type: 'bar',
                    direction: 'vertical',
                    axis: {
                ...