### Install Playwright and Dependencies Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Commands to install necessary testing tools including Playwright and cross-env. ```shell pnpm install --ignore-scripts pnpm create playwright@latest --lang=js --no-browsers --no-examples --quiet pnpm install -D cross-env --ignore-scripts ``` -------------------------------- ### Install Evidence Project using CLI Source: https://context7.com/evidence-dev/evidence/llms.txt This snippet shows how to create a new Evidence project using the CLI template, install dependencies, extract data from configured sources, and start the development server. ```bash # Create a new project from template npx degit evidence-dev/template my-project cd my-project # Install dependencies npm install # Extract data from configured sources npm run sources # Start development server on localhost:3000 npm run dev ``` -------------------------------- ### Install Evidence via CLI Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/ui-components/tabs/+page.md Provides command-line instructions for initializing a new Evidence project or integrating it into an existing dbt project. ```shell npx degit evidence-dev/template my-project cd my-project npm run sources npm install npm run dev ``` ```shell cd path/to/your/dbt/project npx degit evidence-dev/template reports npm --prefix ./reports install npm --prefix ./reports run sources npm --prefix ./reports run dev ``` -------------------------------- ### Initialize and Run Evidence Project using CLI Source: https://github.com/evidence-dev/evidence/blob/main/e2e/packaging/README.md Steps to create a new Evidence project from a template using degit, install dependencies, build sources, and start the development server via the command line. Requires Node.js and npm. ```bash npx degit evidence-dev/template my-project cd my-project npm install npm run sources npm run dev ``` -------------------------------- ### Initialize Evidence Test Project Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Commands to scaffold a new Evidence project from the official template using degit. ```shell npx degit https://github.com/evidence-dev/template my-tests cd my-tests ``` -------------------------------- ### Configure Evidence Dependencies Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Update package.json to use workspace dependencies for local development and testing. ```json { "dependencies": { "@evidence-dev/bigquery": "workspace:*", "@evidence-dev/core-components": "workspace:*", "@evidence-dev/csv": "workspace:*" } } ``` -------------------------------- ### Install and Run Evidence Project in Codespaces Source: https://github.com/evidence-dev/evidence/blob/main/e2e/packaging/README.md Commands to install dependencies, build sources, and run the Evidence development server within a Codespaces environment. Assumes Node.js and npm are available. ```bash npm install npm run sources npm run dev -- --host 0.0.0.0 ``` -------------------------------- ### Initialize Evidence SDK Project Source: https://github.com/evidence-dev/evidence/blob/main/packages/lib/sdk/README.md Commands to install the SDK, add it to a SvelteKit project, and manage data source connections. ```bash npm i @evidence-dev/sdk@preview npx evidence-sdk add npx evidence-sdk plugins install npx evidence-sdk connections edit npx evidence-sdk sources ``` -------------------------------- ### Tooltip Configuration Example (JavaScript) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/maps/point-map/index.md Example demonstrating how to configure tooltips for map elements. It specifies which data fields to display, their formatting, and styling options. This configuration allows for customized tooltips activated by hover or click. ```javascript tooltip={[ {id: 'zip_code', fmt: 'id', showColumnName: false, valueClass: 'text-xl font-semibold'}, {id: 'sales', fmt: 'eur', fieldClass: 'text-[grey]', valueClass: 'text-[green]'}, {id: 'zip_code', showColumnName: false, contentType: 'link', linkLabel: 'Click here', valueClass: 'font-bold mt-1'} ]} ``` -------------------------------- ### Install Evidence via Bash Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/text-and-metrics/code-blocks/+page.md Commands to initialize a new Evidence project using npx and manage dependencies. ```bash npx degit evidence-dev/template my-project cd my-project npm install npm run dev ``` -------------------------------- ### Create Playwright Test Spec Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Example of a basic Playwright test file for an Evidence project verifying page navigation and title. ```javascript // @ts-check import { test, expect } from '@playwright/test'; import { waitForPageToLoad } from '../../test-utils'; test('has title', async ({ page }) => { await page.goto('/'); await waitForPageToLoad(page); await expect(page).toHaveTitle(/Welcome to Evidence/); }); ``` -------------------------------- ### Connected Sparkline Examples (HTML) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/charts/sparkline/index.md Illustrates how to use the Sparkline component with the 'connectGroup' prop to synchronize tooltips across multiple sparklines. This example shows bar, area, and line types. ```html ``` -------------------------------- ### Install Evidence Alongside dbt Project Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/install-evidence/index.md Installs Evidence within an existing dbt project, typically in a 'reports' folder. This allows for monorepo management of dbt models and Evidence reports. Requires terminal access and npm. ```shell cd path/to/your/dbt/project npx degit evidence-dev/template reports npm --prefix ./reports install npm --prefix ./reports run sources npm --prefix ./reports run dev ``` -------------------------------- ### Markdown Syntax Example Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/syntax/index.md Demonstrates basic Markdown syntax supported by Evidence, including lists, text formatting, links, and image inclusion. Images are expected to be in the 'static' folder. ```markdown --- title: Evidence uses Markdown --- Markdown can be used to write expressively in text. - it supports lists, - **bolding**, _italics_ and `inline code`, - links to [external sites](https://google.com) and other [Evidence pages](/another/page) ## Images 🖼️ Evidence looks for images in your `static` folder, e.g. `static/my-logo.png`. ![Company Logo](/my-logo.png) ``` -------------------------------- ### Bar Chart with Annotations (HTML Example) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/charts/bar-chart/index.md Example of how to render a Bar Chart with custom annotations using ReferenceArea and ReferenceLine components. This demonstrates adding visual indicators for specific periods or target values. ```html ``` -------------------------------- ### Bubble Chart Examples Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/dateMulty/+page.md Illustrates the BubbleChart component, using `size=y1` to define bubble size. It shows the chart's rendering with full, missing X, and null data, including an example with a legend. ```jsx ``` -------------------------------- ### Line Chart Examples Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/dateMulty/+page.md Demonstrates the use of LineChart component with different datasets. It shows how the chart renders complete data, data with missing X values, and data with null values. ```jsx ``` -------------------------------- ### Implement DateInput Component Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/inputs/date-input/index.md Examples of implementing the DateInput component in Evidence markdown files, including basic usage, titles, and range selection. ```markdown ``` ```markdown ``` -------------------------------- ### Display All Records in a Table Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/build-your-first-app/index.md This snippet shows a basic SQL query to select all data from a table and display it using the Evidence DataTable component. It serves as a starting point for data visualization. ```sql select * from needful_things.my_query ``` -------------------------------- ### Configure Evidence Tabs Component Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/ui-components/tabs/+page.md Demonstrates the usage of the Tabs component in Evidence, including basic implementation and color customization using Hex, HSL, and RGB formats. ```html This is the content of Tab 1. This is the content of Tab 2. ``` ```html This is the content of Tab 1. This is the content of Tab 2. ``` -------------------------------- ### Perform basic arithmetic operations Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/text-and-metrics/markdown/+page.md Demonstrates simple variable assignment and addition in multiple programming languages. These snippets serve as basic examples of syntax for mathematical operations. ```javascript let x = 100; let y = 200; let z = x + y; ``` ```python x = 100 y = 200 z = x + y ``` -------------------------------- ### Frontmatter Metadata Example (Markdown) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/reference/markdown/index.md Demonstrates how to use Frontmatter to add metadata like title, description, and social sharing options to an Evidence page. Frontmatter must be at the very beginning of the file. ```markdown --- title: Evidence Docs --- ``` -------------------------------- ### Update Test Scripts Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Modify package.json scripts to enable running tests in development and preview modes. ```json { "scripts": { "test:preview": "cross-env playwright test", "test:dev": "cross-env DEV=true playwright test" } } ``` -------------------------------- ### Configure Playwright for Evidence Source: https://github.com/evidence-dev/evidence/blob/main/e2e/README.md Standard configuration for Playwright to work with Evidence projects by extending the shared configuration. ```javascript import { defineConfig } from '@playwright/test'; import { config } from '../playwright-config'; export default defineConfig(config); ``` -------------------------------- ### Example Partial File Content (Markdown) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/reference/markdown/index.md An example of the content that can be placed within a partial markdown file. This content can be reused across multiple Evidence pages. ```markdown # This is my first partial This is some content in the partial. ``` -------------------------------- ### Configure Environment Variables for Evidence Source: https://context7.com/evidence-dev/evidence/llms.txt Demonstrates the structure of a '.env' file for configuring Evidence projects. It shows how to set database credentials, build-time variables for source queries, and runtime variables for frontend access using specific naming conventions. ```dotenv # .env file for local development # Database credentials (format: EVIDENCE_SOURCE__[source_name]__[variable]) EVIDENCE_SOURCE__postgres_db__user=admin EVIDENCE_SOURCE__postgres_db__password=secret123 # Build-time variables for source queries EVIDENCE_VAR__client_id=12345 EVIDENCE_VAR__start_date=2023-01-01 # Runtime variables accessible in pages (must start with VITE_) VITE_COMPANY_NAME=Acme Corp VITE_FEATURE_FLAG=enabled ``` -------------------------------- ### Very Long Bar Chart Example Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/charts/bar-chart/+page.md An example of a bar chart designed for very long data. It displays 'best_of_episodes' and 'non_best_of_episodes' for each 'character_name', using a horizontal layout. ```sql SELECT * FROM csv.characters_ep_total ``` ```javascript ``` -------------------------------- ### Build and Deploy Evidence Apps Source: https://context7.com/evidence-dev/evidence/llms.txt Provides common npm commands for building, previewing, and developing Evidence applications. It includes options for production builds, strict mode builds, local previewing, and starting the development server with custom configurations. ```bash # Build for production npm run build # Build with strict mode (fails on errors) npm run build:strict # Preview the built site locally npm run preview # Start dev server on custom port npm run dev -- --port 4000 # Open specific path on startup npm run dev -- --open /dashboard ``` -------------------------------- ### Image Component Examples Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/ui/image/index.md Demonstrates various ways to use the Image component, including custom sizing, alignment, borders, and padding. The component takes a URL, description, and optional styling attributes like height, width, border, and class. ```markdown ``` ```markdown ``` ```markdown ``` -------------------------------- ### Render Sankey Diagrams with Component Props Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/diagrams/sankey/+page.md Examples of rendering the Sankey diagram component with various configurations including orientation, custom Echarts options, node depth overrides, and label formatting. ```html ``` -------------------------------- ### Execute Sources via CLI Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/build-your-first-app/index.md Run the command to manually execute all configured source queries and update the unified data cache. ```bash npm run sources ``` -------------------------------- ### Configure GitHub Actions Workflow for Hugging Face Deployment Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/deployment/self-host/hugging-face-spaces/index.md This YAML configuration defines a GitHub Actions workflow that installs dependencies, builds the Evidence project, and uploads the static output to a Hugging Face Space. It requires environment variables for data sources and a Hugging Face authentication token stored in GitHub Secrets. ```yaml name: Deploy to Hugging Face Space on Merge on: push: branches: - main workflow_dispatch: jobs: build_and_deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm ci && npm run sources && npm run build env: EVIDENCE_SOURCE__taxi__project_id: ${{ secrets.EVIDENCE_SOURCE__TAXI__PROJECT_ID }} EVIDENCE_SOURCE__taxi__client_email: ${{ secrets.EVIDENCE_SOURCE__TAXI__CLIENT_EMAIL }} EVIDENCE_SOURCE__taxi__private_key: ${{ secrets.EVIDENCE_SOURCE__TAXI__PRIVATE_KEY }} - name: Install Hugging Face CLI run: pip install huggingface-hub - name: Authenticate with Hugging Face run: huggingface-cli login --token "${{ secrets.HUGGINGFACE_TOKEN }}" - name: Deploy to Hugging Face Space run: | huggingface-cli upload [your-username]/[your-space-name] ./build --repo-type=space ``` -------------------------------- ### Serve Options for Evidence Preview Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/reference/cli/index.md The `preview` command in Evidence utilizes `npx serve`, which means it supports all of Serve's command-line options for configuring the preview server. ```shell npx serve --help ``` -------------------------------- ### Update Evidence App via CLI Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/guides/updating-your-app/index.md This command updates the Evidence CLI and core components to their latest versions. It requires Node.js and npm to be installed. The command fetches and installs the newest packages from the npm registry. ```bash npm install @evidence-dev/evidence@latest @evidence-dev/core-components@latest ``` -------------------------------- ### Execute dynamic queries with runQuery Source: https://github.com/evidence-dev/evidence/blob/main/packages/lib/sdk/README.md Demonstrates how to use the runQuery function to fetch data in Svelte components. It includes examples of static and reactive queries, as well as handling loading, error, and result states. ```svelte {#if !$myFirstQuery.loaded} Loading... {:else if $myFirstQuery.error} Error: {$myFirstQuery.error.message} {:else} {#each $myFirstQuery as row (row.id)} Row ID: {row.id} {:else} No resuls available {/each} {/if} ``` -------------------------------- ### Complete Example: Customer Index Page Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/templated-pages/index.md Provides the complete markdown and SQL code for an index page that lists customers and generates links to individual customer pages. It uses a SQL query to fetch customer data and a `` component to display the links. ```markdown # Customers ```sql customers select first_name, '/customers/' || first_name as customer_link, sum(sales) as sales_usd from needful_things.orders group by 1 ``` ``` -------------------------------- ### Example ECharts Series Configuration (JavaScript) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/charts/echarts-options/index.md Provides an example of the underlying ECharts `series` configuration object for a multi-series stacked bar chart. This illustrates how each series is represented individually within the ECharts options, which is relevant when using `echartsOptions` for customization. ```javascript series: [ {type: 'bar', barWidth: 5, name: 'Canada', data: [200,5525,222,444,666]}, {type: 'bar', barWidth: 5, name: 'US', data: [1200,1555,1222,4144,6616]}, {type: 'bar', barWidth: 5, name: 'UK', data: [2060,525,262,4844,4666]}, {type: 'bar', barWidth: 5, name: 'Australia', data: [2200,5555,2252,8444,3666]} ] ``` -------------------------------- ### Set Build Time Variable (.env) Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/data-sources/index.md Demonstrates how to set a build-time variable using an environment file. The variable is prefixed with EVIDENCE_VAR__ followed by the variable name. ```bash EVIDENCE_VAR__client_id=123 ``` -------------------------------- ### DataTable Column Formatting Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/wack-dates.md These examples show how to use the DataTable component with a Column. The first example uses default formatting, while the second explicitly sets a date-time format ('yyyy-mm-dd HH:MM:SS') for the 'month' column, demonstrating data coercion. ```jsx ``` ```jsx ``` -------------------------------- ### Create Hyperlinks using HTML and Markdown Source: https://github.com/evidence-dev/evidence/blob/main/e2e/base-path/pages/images-and-links.md Demonstrates how to create navigation links within an Evidence project. Supports the standard HTML tag and Markdown link syntax. ```html Go to page a ``` ```markdown [Go to page a](/page-a) ``` -------------------------------- ### Perform Arithmetic in JavaScript Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/text-and-metrics/code-blocks/+page.md A basic example of variable declaration and addition in JavaScript. ```javascript let x = 100; let y = 200; let z = x + y; ``` -------------------------------- ### Display Info component with tooltip Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/ui/info/index.md Demonstrates the basic usage of the Info component by providing a description string for the tooltip. This component is typically used inline to provide additional context to the user. ```markdown Data was sourced from the World Bank ``` -------------------------------- ### Manually Specify Date Range Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/inputs/date-input/index.md Shows how to initialize a DateInput component with hardcoded start and end dates. ```markdown ``` -------------------------------- ### BigValue Component Examples Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/text-and-metrics/big-value/+page.md Demonstrates the usage of the BigValue component to display key metrics like sales and order counts. It shows how to configure value display, sparklines, and comparisons against previous periods. ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` -------------------------------- ### Structure Web Content with HTML Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/text-and-metrics/code-blocks/+page.md A standard HTML boilerplate example containing a head and body section. ```html My Page

My Page

This is my page.

Here is another paragraph. It is really long and will need scroll if possible.

``` -------------------------------- ### Apply Color Scales and Heatmaps Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/tables/conditional-formatting/+page.md Examples of using the DataTable component with the contentType=colorscale property to visualize data distributions. ```html ``` ```html ``` -------------------------------- ### Manage Queries with buildQuery Source: https://github.com/evidence-dev/evidence/blob/main/e2e/prerender/pages/index.md Demonstrates the use of the buildQuery utility to handle SSR and non-SSR data fetching within an Evidence page. It returns a store that tracks loading states and data results. ```javascript import { buildQuery } from "@evidence-dev/component-utilities/buildQuery"; const nonssr_query = buildQuery("SELECT category, COUNT(*) as count FROM needful_things.orders GROUP BY category", "nonssr"); const ssr_query = buildQuery("SELECT category, COUNT(*) * 2 as count FROM needful_things.orders GROUP BY category", "ssr", data.ssr_data, { knownColumns: data.ssr_columns }); ``` -------------------------------- ### Configure colorScale prop for components Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/themes/index.md Demonstrates various ways to pass color scales to components like BarChart, including theme names, lists of colors, and explicit light/dark mode pairs. ```markdown ``` -------------------------------- ### Get All Users Data Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/social-media/user-analytics.md Selects all columns and rows from the 'users' table. This is useful for detailed inspection or when all user attributes are needed. ```sql SELECT * FROM users ``` -------------------------------- ### Visualize Monthly Orders with Bar Chart Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/build-your-first-app/index.md This snippet demonstrates creating a Bar Chart to visualize the count of orders per month over the past year. It involves a SQL query to aggregate data by month and an Evidence BarChart component for plotting. ```sql select order_month, count(*) as orders from needful_things.my_query group by order_month order by order_month desc limit 12 ``` -------------------------------- ### Write SQL Queries in Markdown Source: https://context7.com/evidence-dev/evidence/llms.txt Demonstrates how to write SQL queries directly within markdown files using code fences with a query name. Evidence executes these queries using the DuckDB dialect and makes the results available to components. ```markdown # Sales Report ```sql sales_by_category select category, sum(sales) as total_sales, count(*) as order_count from needful_things.orders group by category order by total_sales desc ``` Total categories: {sales_by_category.length} ``` -------------------------------- ### Get Users by Gender Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/social-media/user-analytics.md Counts the number of users for each gender category. This query helps in understanding the gender distribution within the user base. ```sql SELECT COUNT(*) userCount, gender FROM users group by 2 order by 2 asc ``` -------------------------------- ### Build Dynamic Templated Pages Source: https://context7.com/evidence-dev/evidence/llms.txt Templated pages use bracket syntax in filenames to generate routes. Parameters are accessed via the params object to filter data per page. ```sql select date_trunc('month', order_datetime) as month, sum(sales) as sales, count(*) as orders from needful_things.orders where customer_name = '${params.customer}' group by 1 order by month ``` -------------------------------- ### Render Area Chart with Missing Y Values Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/numberSeries/+page.md This example shows an AreaChart component rendering data with missing 'y' values, illustrating its handling of incomplete data. ```html ``` -------------------------------- ### Bubble Chart with Default Settings Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/charts/bubble-chart/index.md This example shows a Bubble Chart configured with default settings, focusing on price, number of units, and total sales. It omits the 'series' property, resulting in a single series chart. ```markdown ``` -------------------------------- ### Filter SQL Query with Date Range Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/inputs/date-input/index.md Shows how to filter a SQL query using the start and end properties of a range-enabled DateInput component. ```sql select * from ${orders_by_day} where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_filtering_a_query.end}' ``` -------------------------------- ### Get Total Users Count Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/social-media/user-analytics.md Retrieves the total number of users from the 'users' table. This query is fundamental for understanding the overall user base size. ```sql SELECT COUNT(*) as userCount FROM users ``` -------------------------------- ### Configure CSV Data Source Connection Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/build-your-first-app/index.md This snippet illustrates the file structure for configuring a CSV data source in Evidence. It includes the necessary YAML files for connection details and options, along with the CSV data file itself. ```yaml sources/ `-- ev_stations/ |-- connection.yaml |-- connection.options.yaml `-- us_alt_fuel_stations.csv ``` -------------------------------- ### Unpivot Data Tables Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/ui-components/tabs/+page.md Demonstrates how to transform wide-format data into long-format data (unpivoting) using SQL, Python (pandas), and R (tidyr). ```sql select id, key, value from my_table unpivot (value for key in (col1, col2, col3)) ``` ```python import pandas as pd df = pd.DataFrame({ 'id': [1, 2, 3], 'col1': ['a', 'b', 'c'], 'col2': ['d', 'e', 'f'], 'col3': ['g', 'h', 'i'] }) df.melt(id_vars=['id'], var_name='key', value_name='value') ``` ```r library(tidyr) df <- data.frame( id = c(1, 2, 3), col1 = c('a', 'b', 'c'), col2 = c('d', 'e', 'f'), col3 = c('g', 'h', 'i') ) df %>% pivot_longer(cols = starts_with("col"), names_to = "key", values_to = "value") ``` -------------------------------- ### Basic Line Chart Implementation Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/charts/line-chart/index.md Demonstrates the basic usage of the LineChart component to display sales per month. Requires 'orders_by_month' data. ```svelte ``` -------------------------------- ### Apply custom colors to components Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/themes/index.md Examples of using custom defined theme colors within component props like Tabs and BarChart. ```markdown Tab 1 content Tab 2 content ``` -------------------------------- ### GitHub Actions Workflow for Deploying Evidence to GitHub Pages Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/deployment/self-host/github-pages/index.md This YAML workflow automates the deployment of an Evidence application to GitHub Pages. It checks out the repository, sets up Node.js, installs dependencies, builds the Evidence app using environment variables for configuration (including secrets for data sources), uploads the build artifacts, and deploys them to GitHub Pages. This workflow is triggered on pushes to the 'main' branch. ```yaml name: Deploy to GitHub Pages on: push: branches: 'main' # or whichever branch you want to deploy from jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install Node.js uses: actions/setup-node@v4 with: node-version: 20 cache: npm - name: Install dependencies run: npm install - name: build env: BASE_PATH: '/${{ github.event.repository.name }}' ## Add and uncomment any environment variables here ## EVIDENCE_SOURCE__my_source__username: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__USERNAME }} ## EVIDENCE_SOURCE__my_source__private_key: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__PRIVATE_KEY }} run: | npm run sources npm run build - name: Upload Artifacts uses: actions/upload-pages-artifact@v3 with: path: 'build/${{ github.event.repository.name }}' deploy: needs: build runs-on: ubuntu-latest permissions: pages: write id-token: write environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy id: deployment uses: actions/deploy-pages@v4 ``` -------------------------------- ### Render Evidence Charts Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/stringSeries/+page.md Examples of rendering Bar, Line, and Area charts with various properties like swapXY, handleNulls, and type configurations. ```html ``` -------------------------------- ### Frontmatter Configuration in Evidence Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/syntax/index.md Demonstrates the use of frontmatter in Evidence Markdown files for configuration. This includes setting the page title, description, Open Graph metadata, and referencing SQL queries. ```markdown --- title: Evidence uses Markdown description: Evidence uses Markdown to write expressively in text. og: image: /my-social-image.png queries: - orders_by_month.sql --- ``` -------------------------------- ### Prepare Data for Area Map Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/components/maps/area-map/index.md SQL query examples to prepare datasets for the AreaMap component, including filtering and adding link columns. ```sql select *, 'https://www.google.com/search?q=' || zip_code as link_col from la_zip_sales where zip_code <> 90704 ``` ```sql select state, count(*) as orders from orders where state != 'Alaska' and state != 'Hawaii' group by state ``` -------------------------------- ### Configure Environment Variables for Authentication Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/data-sources/javascript/index.md Shows how to define environment variables for API credentials in a .env file. Variables must be prefixed with EVIDENCE_ to be accessible within the project. ```yaml EVIDENCE_API_KEY=1234567890 ``` -------------------------------- ### Annotate Sales Chart with Reference Lines and Areas Source: https://context7.com/evidence-dev/evidence/llms.txt Visualizes monthly revenue with a LineChart, adding a horizontal reference line for sales targets and a shaded reference area for a promotional period. It requires SQL queries for 'monthly_revenue' and 'targets', and uses Svelte components for charting and annotations. ```sql select date_trunc('month', order_datetime) as month, sum(sales) as revenue from needful_things.orders group by 1 ``` ```sql select 50000 as target, 'Monthly Target' as label ``` ```svelte ``` -------------------------------- ### Get Unique Categories (SQL) Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/categories/[category]/index.md Retrieves a distinct list of categories from the 'orders' table in the 'needful_things' schema. Results are lowercased and aliased as 'category'. ```sql SELECT lower(category) as category FROM needful_things.orders ``` -------------------------------- ### Evidence CLI Commands Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/reference/cli/index.md Common commands for managing Evidence projects, including creating new projects, running data sources, starting the development server, building for production, and previewing the built site. These commands are typically executed using npx or npm. ```shell npx degit evidence-dev/template my-project ``` ```shell npm run sources ``` ```shell npm run dev ``` ```shell npm run build ``` ```shell npm run build:strict ``` ```shell npm run preview ``` ```shell Ctrl / Cmd + C ``` ```shell r ``` -------------------------------- ### Configuring DataTable with Aggregations and Formatting Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/tables/total-rows/+page.md Examples of using the DataTable component to display data with custom column aggregations, formatting, and total row overrides. ```html ``` ```html ``` ```html ``` -------------------------------- ### Implement ButtonGroup with Query Data Source: https://github.com/evidence-dev/evidence/blob/main/sites/test-env/pages/button-range.md Displays how to bind a SQL query to a ButtonGroup component. Includes examples with optional titles and handling of non-resolving queries. ```html ``` -------------------------------- ### Evidence Component Usage for Charts Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/syntax/index.md Illustrates how to use Evidence's built-in component library to create visual elements, specifically a LineChart. It references data from a previously executed SQL query. ```markdown ``` -------------------------------- ### Configure Azure Static Web Apps GitHub Action Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/deployment/self-host/azure-static-apps/index.md This YAML configuration snippet demonstrates how to update the GitHub Actions workflow file to include the necessary build command for Evidence and define environment variables mapped from repository secrets. ```yaml - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: app_build_command: "npm run sources && npm run build" env: EVIDENCE_SOURCE__my_source__username: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__USERNAME }} EVIDENCE_SOURCE__my_source__private_key: ${{ secrets.EVIDENCE_SOURCE__MY_SOURCE__PRIVATE_KEY }} ``` -------------------------------- ### Define a broken SQL query Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/queries/writing-queries/+page.md An example of a query structure that may cause issues during execution. This snippet is provided for troubleshooting and identifying invalid query patterns. ```sql select 100/2 as whoops ``` -------------------------------- ### Render Stacked Bar Chart Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/numberSeries/+page.md This example shows a Stacked Bar Chart component. It visualizes data where bars for different series are stacked on top of each other at each x-axis value. ```html ``` -------------------------------- ### Render Area Chart with Null Y Values Source: https://github.com/evidence-dev/evidence/blob/main/sites/example-project/src/pages/chart-testing/numberSeries/+page.md This example demonstrates an AreaChart component rendering data containing null 'y' values, showing how null points are handled in the visualization. ```html ``` -------------------------------- ### Display Bar Chart using Component Source: https://github.com/evidence-dev/evidence/blob/main/sites/docs/pages/core-concepts/components/index.md Demonstrates how to use the BarChart component to visualize data. It requires a data source and specifies columns for x-axis, y-axis, and series, along with a title. Data and configuration are passed as properties. ```html ``` -------------------------------- ### DataTable Component Source: https://context7.com/evidence-dev/evidence/llms.txt Provides an example of the DataTable component for displaying query results in formatted tables. Features include sorting, search, conditional formatting, sparklines, and grouping. ```markdown ```markdown ```sql order_summary select state, category, sum(sales) as sales, count(*) as orders, sum(sales) / count(*) as aov, 0.05 + random() * 0.1 as growth from needful_things.orders group by 1, 2 ``` ``` ```