<commit_before>import * as React from "react"
import { DataTable, DataTableManager } from "./DataTable"
import { SynthesizeGDPTable } from "coreTable/OwidTableSynthesizers"
import { childMortalityGrapher } from "./DataTable.sample"
import { ChartTypeName, GrapherTabOption } from "grapher/core/GrapherConstants"

export default {
    title: "DataTable",
    component: DataTable,
}

const table = SynthesizeGDPTable({
    timeRange: [1950, 2010],
    entityCount: 7,
})

export const Default = () => {
    const manager: DataTableManager = {
        table,
    }
    return <DataTable manager={manager} />
}

export const WithTimeRange = () => {
    const manager: DataTableManager = {
        table,
    }
    manager.startHandleTimeBound = 1950
    manager.endHandleTimeBound = 2000
    return <DataTable manager={manager} />
}

export const WithTolerance = () => {
    const table = SynthesizeGDPTable(
        {
            timeRange: [2010, 2020],
            entityCount: 3,
        },
        3,
        {
            tolerance: 1,
        }
    )

    const filteredTable = table.dropRowsAt([0, 10, 11])

    return (
        <div>
            <DataTable
                manager={{
                    table,
                    startHandleTimeBound: 2010,
                    endHandleTimeBound: 2010,
                }}
            />
            <div>
                One country with data, one with data within tolerance, one
                outside tolerance:
            </div>
            <DataTable
                manager={{
                    startHandleTimeBound: 2010,
                    endHandleTimeBound: 2010,
                    table: filteredTable,
                }}
            />
        </div>
    )
}

export const FromLegacy = () => {
    const grapher = childMortalityGrapher()
    return <DataTable manager={grapher} />
}

export const FromLegacyWithTimeRange = () => {
    const grapher = childMortalityGrapher({
        type: ChartTypeName.LineChart,
        tab: GrapherTabOption.chart,
    })
    grapher.startHandleTimeBound = 1950
    grapher.endHandleTimeBound = 2019
    return <DataTable manager={grapher} />
}

// grapher.timeDomain = [2009, 2017]
// Todo: how can I get this to show a closest time popup?<commit_msg>Fix: DataTable stories compilation<commit_after>import * as React from "react"
import { DataTable, DataTableManager } from "./DataTable"
import { SynthesizeGDPTable } from "coreTable/OwidTableSynthesizers"
import { childMortalityGrapher } from "./DataTable.sample"
import { ChartTypeName, GrapherTabOption } from "grapher/core/GrapherConstants"

export default {
    title: "DataTable",
    component: DataTable,
}

const table = SynthesizeGDPTable({
    timeRange: [1950, 2010],
    entityCount: 7,
})

export const Default = () => {
    const manager: DataTableManager = {
        table,
    }
    return <DataTable manager={manager} />
}

export const WithTimeRange = () => {
    const manager: DataTableManager = {
        table,
    }
    manager.startTime = 1950
    manager.endTime = 2000
    return <DataTable manager={manager} />
}

export const WithTolerance = () => {
    const table = SynthesizeGDPTable(
        {
            timeRange: [2010, 2020],
            entityCount: 3,
        },
        3,
        {
            tolerance: 1,
        }
    )

    const filteredTable = table.dropRowsAt([0, 10, 11])

    return (
        <div>
            <DataTable
                manager={{
                    table,
                    startTime: 2010,
                    endTime: 2010,
                }}
            />
            <div>
                One country with data, one with data within tolerance, one
                outside tolerance:
            </div>
            <DataTable
                manager={{
                    startTime: 2010,
                    endTime: 2010,
                    table: filteredTable,
                }}
            />
        </div>
    )
}

export const FromLegacy = () => {
    const grapher = childMortalityGrapher()
    return <DataTable manager={grapher} />
}

export const FromLegacyWithTimeRange = () => {
    const grapher = childMortalityGrapher({
        type: ChartTypeName.LineChart,
        tab: GrapherTabOption.chart,
    })
    grapher.startHandleTimeBound = 1950
    grapher.endHandleTimeBound = 2019
    return <DataTable manager={grapher} />
}

// grapher.timeDomain = [2009, 2017]
// Todo: how can I get this to show a closest time popup?
{'fraction_non_alphanumeric': 0.09926388579076512, 'fraction_numerical': 0.028998438545616775, 'mean_word_length': 1.9079118028534372, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7575083', 'n_tokens_mistral': 1394, 'n_tokens_neox': 1239, 'n_words': 308}