gradio/js/dataframe/Dataframe.stories.svelte
Abubakar Abid f49028cfe3
Move markdown & latex processing to the frontend for the gr.Markdown and gr.DataFrame components (#5268)
* changes

* katex

* add changeset

* dataframe

* add changeset

* latex in dataframe

* add changeset

* lint

* lint

* stories and types

* stories

* type

* restore lock

* pnpm lock

* fix backend tests

* xray configs

* test files

* test utils

* fix utils

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2023-08-21 06:54:20 -07:00

82 lines
1.5 KiB
Svelte

<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Table from "./shared/Table.svelte";
</script>
<Meta
title="Components/DataFrame"
component={Table}
argTypes={{
editable: {
control: [true, false],
description: "Whether the DataFrame is editable",
name: "interactive",
value: true
}
}}
/>
<Template let:args>
<Table {...args} />
</Template>
<Story
name="Interactive dataframe"
args={{
values: [
["Cat", 5],
["Horse", 3],
["Snake", 1]
],
headers: ["Animal", "Votes"],
label: "Animals",
col_count: [2, "dynamic"],
row_count: [3, "dynamic"]
}}
/>
<Story
name="Static dataframe"
args={{
values: [
["Cat", 5],
["Horse", 3],
["Snake", 1]
],
headers: ["Animal", "Votes"],
label: "Animals",
col_count: [2, "dynamic"],
row_count: [3, "dynamic"],
editable: false
}}
/>
<Story
name="Dataframe with markdown and math"
args={{
values: [
["Linear", "$y=x$", "Has a *maximum* of 1 root"],
["Quadratic", "$y=x^2$", "Has a *maximum* of 2 roots"],
["Cubic", "$y=x^3$", "Has a *maximum* of 3 roots"]
],
headers: ["Type", "Example", "Roots"],
datatype: ["str", "markdown", "markdown"],
latex_delimiters: [{ left: "$", right: "$", display: false }],
label: "Math",
col_count: [3, "dynamic"],
row_count: [3, "dynamic"],
editable: false
}}
/>
<Story
name="Empty dataframe"
args={{
values: [[]],
headers: ["Animal", "Votes"],
label: "Animals",
col_count: [2, "dynamic"],
row_count: [0, "dynamic"]
}}
/>