line, bar, scatter... they are all shown in cartesian grid, with similar configurations

examples:

• step: https://echarts.apache.org/examples/en/editor.html?c=line-step
• smooth: https://echarts.apache.org/examples/en/editor.html?c=line-smooth

Tasks

Dashboard DB

• SQLs for creating a database and a table
• DB migration
• a dump SQL for demo

1. use pg for database
2. following is an example of that table's structure

CREATE TABLE
    "public"."dashboard" (
        "id" serial,
        "name" VARCHAR NOT NULL DEFAULT '',
        "content" jsonb NOT NULL DEFAULT '{}',
        "created_at" TIMESTAMP NOT NULL DEFAULT NOW(),
        "updated_at" TIMESTAMP NOT NULL DEFAULT NOW(),
        "is_removed" bool NOT NULL DEFAULT 'false',
        PRIMARY KEY ("id")
    );

Dashboard API

• get dashboard list (name & id)
• get dashboard detail
• create dashboard
• update dashboard
• delete dashboard (set is_removed true)

• Add database table for storing data source configurations
• Add CRUD for data source configurations

Goals

Configure and use multiple PG data sources in panels

Tasks

• @miguel-lansdorf Configure multiple PG connections in .env file. Note: name them uniquely
• @miguel-lansdorf An API for getting connection list as available data sources
• @GerilLeto Add dataSources to dashboard.definition, including these info
  1. type (Currently only postgresql)
  2. name (which db connection is being used to run query)
  3. query (query: { sql: string })
  4. id
• @GerilLeto Change panel.sql to panel.dataSourceID, referencing dashboard.definitions.dataSources
• @miguel-lansdorf Let /query API accepts dataSource as params instead of SQL
• @GerilLeto Add a new config modal for editing dashboard.definitions.dataSources
• @GerilLeto Change panel's SQL tab to Data Source tab

define SQL at dashboard level, like sqlSnippets, then let panels refer them

• v1.0.0 Multiple SQL data sources #20
• v1.x.0 Apply UX design & improvements
• v2.0.0 Schema migration method
• v3.0.0 A plugin system for visualization components
• v4.0.0 Platform MVP

• Configure gulp

Tasks

• Split dashboard dir into 2: dashboard and dashboard-demo
• Release dashboard

Typescript provides better tooling for development which reduces the amount of bugs in the code.

1. value formatter

2. show value around the data point

3. x/y axis name

• remove border below title
• reduce the gap between title & content
• click title to open action menu

• Optimize the api backend to deal with requests in a more standardized way which makes adding new controllers and services easier.
• Optimize error handling

• Fix styling of code (spaces, semicolon, etc)
• Remove unnecessary imports
• update .env
• update readme

problem

this kind of query conditions would appears in most panels of a dashboard

"author_time BETWEEN '\$\{timeRange?.[0].toISOString()\}' AND '\$\{timeRange?.[1].toISOString()\}'"

"`\${emails.length > 0 ? \`author_email IN (\${emails.map(v => "'" + v + "'").join(",")})\` : 'TRUE' }`"

but currently users have to copy&paste them repeatedly into almost every panel

proposal

SQL Snippets: users may save snippets into a dashboard, refer them in panels, use them to build panels' queries

https://echarts.apache.org/en/option.html#visualMap-continuous.type

from

color: '#fff'

to

color: {
    type: 'static',
    value: '#fff',
}

// and

color: {
    type: 'dynamic',
    value: `return data.rate > 0.5 ? 'green' : 'red'` // js code snippet
}

• from 1 y axis to multiple y axes
• each y axis has value_formatter
• remove series.y_axis_data_formatter
• add sereis.y_axis_id
• change tooltip.formatter accordingly

data source should be pg / mysql / graphql / http etc.
query is SQL / http request definition

unfortunately these two concepts are now both data source, following changes should be made to clarify them:

1. dashboard.definition.dataSources -> dashboard.definition.queries
2. dashboard.panels.dataSourceID -> dashboard.panels.queryID