Zendro

https://github.com/zendro-dev/zendro
Admin
Zendro is a command-line interface for building and managing data warehouses with GraphQL APIs,...
Tokens:13,590
Snippets:107
Trust Score:3.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Start Zendro Services (Local Setup)

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Execute `zendro start` to run all services for a local setup, including Keycloak if configured. Add `-p` for production mode.

```bash
zendro start
```

```bash
zendro start -p
```

--------------------------------

### Install Zendro CLI Globally

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Installs the Zendro CLI globally using npm. This is a quick way to get started.

```bash
npm install -g Zendro-dev/zendro
```

--------------------------------

### Start Zendro services

Source: https://context7.com/zendro-dev/zendro/llms.txt

Use `zendro start` to run Zendro services. Services can be started individually or all at once. Use `-p` for production mode. Logs are written to the `./logs/` directory.

```bash
# Start all services in development mode
zendro start
```

```bash
# Start only the GraphQL server
zendro start gqs
```

```bash
# Start SPA and GraphiQL in production mode
zendro start -p spa giql
```

```bash
# Start all services in production mode
zendro start -p
```

--------------------------------

### Set Up Zendro CLI Locally

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Installs the Zendro CLI from a local clone of the repository. Useful for development and customization.

```bash
$ git clone https://github.com/Zendro-dev/zendro.git
$ cd zendro
$ npm install
$ npm link
```

--------------------------------

### Start Zendro Services

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Starts Zendro services. By default, starts all services. Can specify individual services like 'gqs', 'spa', or 'giql'.

```bash
zendro start
```

```bash
zendro start -p
```

```bash
zendro start gqs spa
```

--------------------------------

### Dockerize Zendro Instance (Development)

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Run `zendro dockerize -u` to start a Zendro instance using Docker in development mode. Default credentials are 'zendro-admin'/'admin'.

```bash
zendro dockerize -u
```

--------------------------------

### Create a new Zendro project

Source: https://context7.com/zendro-dev/zendro/llms.txt

Use `zendro new` to create a new project. Pass `-d` to retain Docker Compose files for containerized setup; otherwise, it defaults to a local setup.

```bash
# Create a new project called "my-app" with local (no-docker) setup
zendro new my-app
```

```bash
# Create a new project and keep Docker Compose files
zendro new -d my-app
```

--------------------------------

### Dockerize Zendro Application

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Manages Docker services for a Zendro application. Use '-u' to start and '-d' to stop.

```bash
zendro dockerize -u
```

```bash
zendro dockerize -d
```

```bash
zendro dockerize -p
```

--------------------------------

### Executing GraphQL Queries with Zendro

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Illustrates how to execute GraphQL queries or mutations using the `execute_graphql` function. Authentication via token may be required in distributed setups with ACL rules.

```javascript
await zendro.execute_graphql("{ countMovies }");
```

--------------------------------

### Dockerize Zendro Instance (Production)

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use `zendro dockerize -u -p` to start a Zendro instance in production mode with Docker. This command also uploads files to a remote server.

```bash
zendro dockerize -u -p
```

--------------------------------

### Manage Docker Compose Deployments

Source: https://context7.com/zendro-dev/zendro/llms.txt

Manages Docker Compose deployments. Use `-u` to start containers and `-d` to stop them. The `-p` flag selects production mode (`docker-compose-prod.yml`), while omitting it uses development mode (`docker-compose-dev.yml`). The `-v` flag removes Docker volumes and migration logs when stopping.

```bash
zendro dockerize -u
```

```bash
zendro dockerize -u -p
```

```bash
zendro dockerize -d
```

```bash
zendro dockerize -d -p -v
```

--------------------------------

### Raincloud Plot Component Setup

Source: https://github.com/zendro-dev/zendro/blob/master/plot/raincloud_plot.txt

Sets up state management for plot configurations like display, direction, grouping, angle, and span mode. Includes event handlers for user interactions.

```typescript
import React from 'react';
import { ModelLayout, PageWithLayout } from '@/layouts';
import { createStyles, makeStyles } from '@mui/styles';
import { useState } from 'react';
import { useSession } from 'next-auth/react';
import SelectLabels from '@/zendro/plots/data-model-field-selector';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Switch from '@mui/material/Switch';
import IntField from '@/zendro/record-fields/int-field';
import dynamic from 'next/dynamic';
const PlotlyPlot = dynamic(() => import('@/zendro/plots/defaultPlotlyPlot'), {
  ssr: false,
});

const Plots: PageWithLayout = () => {
  useSession();
  const [display, setDisplay] = useState(false);
  const [direction, setDirection] = useState(false);
  const [group, setGroup] = useState<number | null>(0);

  const [data, setData] = useState<any>({});
  const [attributes, setAttributes] = useState<any>({});
  const [angle, setAngle] = useState<number>(0);
  const [spanMode, setSpanMode] = useState('soft');

  const handleChangeForDisplay = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    setDisplay(event.target.checked);
  };
  const handleChangeForDirection = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    setDirection(event.target.checked);
  };
  const handleChangeForSpanMode = (event: SelectChangeEvent): void => {
    setSpanMode(event.target.value);
  };
  const handleChangeForAttributes =
    (index: string) => (event: SelectChangeEvent) => {
      setAttributes({ ...attributes, [index]: event.target.value });
    };
  const changeData = (index: string) => (records: number[]) => {
    setData({ ...data, [index]: records });
  };
  // add custom classes
  const classes = useStyles();

  return (
    // Generic plot container. Feel free to change
    <div className={classes.plotContainer}>
      <Stack direction="row" spacing={2}>
        <Stack direction="column" spacing={2}>
          <Typography variant="h6" gutterBottom>
            The number of numerical attributes:
          </Typography>
          <IntField
            value={group}
            onChange={(value) => {
              if (value == null || value >= 0) {
                setGroup(value);
                setData(
                  Object.fromEntries(
                    [...Array(value).keys()].map((x) => ['group' + x, []])
                  )
                );
                setAttributes(
                  Object.fromEntries(
                    [...Array(value).keys()].map((x) => ['group' + x, ''])
                  )
                );
              }
            }}
            onError={(err) => {
              if (err) {
                console.log('error:', err);
              }
            }}
          />
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Direction:</Typography>
            <Typography>Horizontal</Typography>
            <Switch
              checked={direction}
              onChange={handleChangeForDirection}
              inputProps={{ 'aria-label': 'controlled' }}
            />
            <Typography>Vertical</Typography>
          </Stack>
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Tickangle:</Typography>
            <IntField
              value={angle}
              onChange={(value) => {
                if (value) {
                  setAngle(value);
                }
              }}
              onError={(err) => {
                if (err) {
                  console.log('error:', err);
                }
              }}
            />
          </Stack>
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Display:</Typography>
            <Switch
              checked={display}
              onChange={handleChangeForDisplay}
              inputProps={{ 'aria-label': 'controlled' }}
            />
            <Typography variant="h6">Span mode:</Typography>
            <Select
              labelId="span-helper-label"
              id="span-helper"
              value={spanMode}
              label="Attribute"
              onChange={handleChangeForSpanMode}
            >
              <MenuItem value={'soft'}>soft</MenuItem>
              <MenuItem value={'hard'}>hard</MenuItem>
            </Select>
          </Stack>
          {group != null &&
            group > 0 &&
            [...Array(group).keys()].map((x) => (
              <SelectLabels
                key={'select-group-' + x}
                setData={changeData('group' + x)}
                attribute={attributes['group' + x]}
                handleChangeForAttributes={handleChangeForAttributes(
                  'group' + x
                )}
                helperText={`attribute ${x + 1}`}
              />
            ))}

```

--------------------------------

### React Plotly Component

Source: https://github.com/zendro-dev/zendro/blob/master/plot/plotly_component.txt

Defines a reusable React component for rendering Plotly charts. Requires 'react-plotly.js' and 'react' to be installed. The component accepts a 'data' prop which is the Plotly data object.

```typescript
import React from 'react';
import Plot from 'react-plotly.js';

// define types of properties
const CustomPlotlyPlot: React.FC<{ data: any }> = (props) => {
  return (
    <Plot
      // plotly data object
      data={props.data}
      // other plot parameters
    />
  );
};

export default CustomPlotlyPlot;
```

--------------------------------

### Stop Zendro Services

Source: https://context7.com/zendro-dev/zendro/llms.txt

Stops one or more running Zendro services by terminating their OS processes. Use the `-p` flag for services started in production mode. Defaults to stopping all services.

```bash
zendro stop
```

```bash
zendro stop gqs
```

```bash
zendro stop -p spa giql
```

```bash
zendro stop -p
```

--------------------------------

### React Component for D3.js Plot

Source: https://github.com/zendro-dev/zendro/blob/master/plot/d3_component.txt

This React component uses `useRef` to get a reference to an SVG element and `useEffect` to draw a D3.js plot. Access data via `props.data`.

```javascript
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const CustomD3Plot: React.FC<{ data: any }> = (props) => {
  const ref = useRef(null);
  useEffect(() => {
    const svgElement = d3.select(ref.current);
    // draw a plot with d3 library
    // data could be accessed via props.data
  }, []);

  return <svg ref={ref} />;
};

export default CustomD3Plot;
```

--------------------------------

### Set up a Zendro sandbox

Source: https://context7.com/zendro-dev/zendro/llms.txt

Use `zendro set-up` for a quick sandbox bootstrap. It creates a new project, adds default data models, generates code, and configures SQLite storage. Pass `-d` to keep Docker Compose files.

```bash
# Set up a sandbox named "demo" using local setup with SQLite
zendro set-up demo
```

```bash
# Set up a sandbox keeping Docker Compose files
zendro set-up -d demo
```

```json
# The generated SQLite config written to demo/graphql-server/config/data_models_storage_config.json:
# {
#   "default-sql": {
#     "storageType": "sql",
#     "dialect": "sqlite",
#     "storage": "data.db"
#   }
# }
```

```bash
# Start the sandbox immediately after setup
cd demo
zendro start
```

--------------------------------

### Set Up Zendro Sandbox Environment

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Execute `zendro set-up -d <name>` to initialize a Zendro sandbox. Remember to configure environment variables in the relevant `.env` files for SPA and GraphiQL.

```bash
zendro set-up -d <name>
```

--------------------------------

### Create a New Zendro Application

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Scaffolds a new Zendro application. Optionally includes Dockerfiles and initializes the user database.

```bash
zendro new <your_application_name>
```

```bash
zendro new <your_application_name> -d
```

--------------------------------

### Create New Zendro Application with Docker Files

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Run `zendro new -d test` to create a new Zendro application named 'test' and retain the Docker files. Environment variables can be configured in the specified files.

```bash
zendro new -d test
```

--------------------------------

### Accessing Model and Adapter Storage Handlers

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Demonstrates how to access the storage handler for models and adapters to interact with the database management system.

```javascript
await zendro.models.movie.storageHandler;
await zendro.models.movie.countRecords();
await zendro.adapters.dist_movie_instance1.storageHandler;
await zendro.adapters.dist_movie_instance1.countRecords();
```

--------------------------------

### Generate GraphQL Server and Migrations

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

After adding model definition JSON files to `./data_model_definitions`, execute `zendro generate -m` to generate the GraphQL server code and migrations.

```bash
zendro generate -m
```

--------------------------------

### Configure Remote Server for Bulk Operations

Source: https://context7.com/zendro-dev/zendro/llms.txt

This file is used by bulk-create and bulk-download commands when the -r flag is used, and for migration commands requiring a token. Ensure to copy and edit the sample file before use.

```bash
# Copy and edit the sample file
cp .env.migration.sample .env.migration
```

```bash
# .env.migration contents:
OAUTH2_TOKEN_URI=http://localhost:8081/auth/realms/zendro/protocol/openid-connect/token
REMOTE_URL=http://localhost:3000/graphql
CLIENT_ID=zendro_graphql-server
USER_NAME=zendro-admin
PASSWORD=admin
LIMIT_RECORDS=10000
RECORD_DELIMITER=\n
FIELD_DELIMITER=,
ARRAY_DELIMITER=;
```

```bash
# The helper internally retrieves a Bearer token from Keycloak
# and attaches it to all GraphQL requests automatically:
# POST REMOTE_URL
# Authorization: Bearer <access_token>
# Content-Type: application/json
# { "query": "{ countCountries }" }
```

--------------------------------

### Generate Database Migrations

Source: https://context7.com/zendro-dev/zendro/llms.txt

Generates database migration files from data model definitions. Migration files are placed in `<output_dir>/migrations/`. Use `-f` to specify a definitions directory or JSON file, and `-o` to set a custom output directory. The `zendro` argument within migration files provides access to models and adapters.

```bash
zendro migration:generate
```

```bash
zendro migration:generate -f ../my_models
```

```bash
zendro migration:generate -f ../models/movie.json -o ./
```

```javascript
module.exports = {
  up: async (zendro) => {
    // Count records before migration
    const count = await zendro.models.movie.countRecords();
    console.log(`Records before migration: ${count}`);

    // Execute a GraphQL query
    const res = await zendro.execute_graphql("{ countMovies }");
  },
  down: async (zendro) => {
    // Drop table / rollback logic here
  }
};
```

--------------------------------

### Apply Database Migrations Upwards

Source: https://context7.com/zendro-dev/zendro/llms.txt

Executes all pending database migrations. Must be run from inside the `graphql-server` directory. Tracks migration state in `zendro_migration_state.json` and logs history in `zendro_migration_log.json`.

```bash
cd my-app/graphql-server
zendro migration:up
```

--------------------------------

### Download Records with zendro bulk-download

Source: https://context7.com/zendro-dev/zendro/llms.txt

Use this command to download all records of a specific model to a CSV file. Configure delimiters and remote access via .env.migration. If no file path is specified, a file with a name based on the model and a UUID is created.

```bash
# Local download — run from inside the graphql-server directory
cd my-app/graphql-server
```

```bash
# Download all country records to a specific file
zendro bulk-download -f ../export/country.csv -n country
```

```bash
# Download to an auto-named file in the current directory
zendro bulk-download -n river
```

```bash
# Remote download — configure .env.migration, then:
zendro bulk-download -f ./country.csv -n country -r
```

```bash
# Configure delimiters via graphql-server/.env:
# LIMIT_RECORDS=10000
# RECORD_DELIMITER=\n
# FIELD_DELIMITER=,
# ARRAY_DELIMITER=;
```

--------------------------------

### Download Records from Local Zendro Instance

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use this command to download all data to CSV format from a local Zendro instance. Delimiters and record limits can be configured in graphql-server/.env.

```bash
zendro bulk-download -f <filename> -n <modelname>
```

--------------------------------

### Generate GraphQL Server Migrations

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Generates migration code for the GraphQL server. Specify input definitions and output directory.

```bash
zendro migration:generate -f <data_model_definitions> -o <output_dir>
```

--------------------------------

### Upload File to Local Zendro Instance

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use this command to upload files (CSV, XLSX, JSON) to a local Zendro instance. The 'sheetname' parameter is only for XLSX files. Configuration for delimiters and record limits is in graphql-server/.env.

```bash
zendro bulk-create -f <filename> -n <modelname> -s <sheetname>
```

--------------------------------

### Upload File to Remote Zendro Instance

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use this command to upload files to a remote Zendro instance. Configuration is done in zendro/.env.migration. The '-r' flag indicates a remote upload.

```bash
zendro bulk-create -f <filename> -n <modelname> -s <sheetname> -r
```

--------------------------------

### Execute Migrations

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Applies pending database migrations. The state of the last executed migration is recorded in `zendro_migration_state.json`.

```bash
zendro migration:up
```

--------------------------------

### Generate GraphQL server code

Source: https://context7.com/zendro-dev/zendro/llms.txt

Use `zendro generate` to create server code from JSON data models. Pass `-m` to also generate database migrations. Multiple `-f` flags can be used to specify individual files or directories.

```bash
# Generate from the default ./data_model_definitions directory
# into the default ./graphql-server output directory
zendro generate
```

```bash
# Generate from a specific directory, with migrations
zendro generate -f ./my_models -m
```

```bash
# Generate from multiple sources into a custom output directory
zendro generate -f ./models/core -f ./models/extra.json -o ./graphql-server -m
```

```json
# Example data model definition (city.json):
# {
#   "model": "city",
#   "storageType": "sql",
#   "attributes": {
#     "city_id": "String",
#     "name": "String",
#     "population": "Int",
#     "country_id": "String"
#   },
#   "associations": {
#     "country": {
#       "type": "many_to_one",
#       "implementation": "foreignkeys",
#       "reverseAssociation": "cities",
#       "target": "country",
#       "targetStorageType": "sql",
#       "targetKey": "country_id",
#       "keysIn": "city"
#     }
#   },
#   "internalId": "city_id",
#   "spaSearchOperator": "like"
# }
```

--------------------------------

### Manage Zendro Sub-repository Versions

Source: https://context7.com/zendro-dev/zendro/llms.txt

This JSON file specifies the branch or tag names for the cloned sub-repositories. Edit this file before running 'zendro new' to use specific versions or custom forks.

```json
{
  "single-page-app": "latest-stable",
  "graphql-server": "latest-stable",
  "graphiql-auth": "latest-stable"
}
```

--------------------------------

### Bulk Create Records

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Parses a file (CSV, XLSX, JSON) and uploads the records to the GraphQL server. Specify file path, model name, and optionally sheet name or remote server.

```bash
zendro bulk-create -f <file_path> -n <model_name> -s <sheet_name> -r
```

--------------------------------

### Generate Visualization Plots with zendro create-plot

Source: https://context7.com/zendro-dev/zendro/llms.txt

Run this command from inside the single-page-app directory to generate scaffold files for visualization plots using Plotly or D3. Supports custom plots with optional navigation and pre-built default plots.

```bash
# Run from inside the single-page-app directory
cd my-app/single-page-app
```

```bash
# Create a custom Plotly bar chart with top-menu navigation
zendro create-plot -f barchart -t plotly -m top
```

```bash
# Create a custom D3 circle chart with left-menu navigation
zendro create-plot -f circle -t d3 -m left -n "Circle Chart"
```

```bash
# Create a custom plot with no navigation
zendro create-plot -f histogram -t plotly -m none
```

```bash
# Generate all three default plots (scatter, rain-cloud, boxplot)
zendro create-plot -p
```

```bash
# Files created for a custom Plotly plot named "barchart":
# ./src/pages/barchart.tsx          — page component (edit fetchData here)
# ./src/zendro/plots/barchart.tsx   — plot layout and parameters
```

```bash
# Files created by -p (default plots):
# ./src/pages/scatter-plot.tsx
# ./src/pages/boxplot.tsx
# ./src/pages/rain-cloud-plot.tsx
# ./src/zendro/plots/defaultPlotlyPlot.tsx
# ./src/zendro/plots/data-model-field-selector.tsx
```

--------------------------------

### Using Resolver API Functions with Error Handling

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Shows how to call resolver API functions like `countMovies` and collect errors using an event emitter. Ensure the `BenignErrorArray` utility is imported.

```javascript
const {
  BenignErrorArray,
} = require("./graphql-server/utils/errors.js");
let benign_errors_arr = new BenignErrorArray();
let errors_sink = [];
let errors_collector = (err) => {
  errors_sink.push(err);
};
benign_errors_arr.on("push", errors_collector);
const res = await zendro.resolvers.countMovies(
  { search: null },
  {
    request: null, // by default the token is null
    acl: null,
    benignErrors: benign_errors_arr, // collect errors
    recordsLimit: 15,
  }
);
```

--------------------------------

### Generate GraphQL Server Code

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Generates code for the GraphQL server. Can specify input definitions and output directory, and enable migrations.

```bash
zendro generate -f <data_model_definitions> -o <output_dir> -m
```

--------------------------------

### Download Records from Remote Zendro Instance

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use this command to download records to CSV from a remote Zendro instance. Configure the remote instance in zendro/.env.migration. The '-r' flag indicates a remote operation.

```bash
zendro bulk-create -f <filename> -n <modelname> -r
```

--------------------------------

### Generate Default Plots with Zendro

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Execute this command in the `single-page-app` folder to generate three default plots: scatter-plot, rain-cloud-plot, and boxplot. Ensure numerical attributes are selected for scatter-plots and rain-cloud-plots as required.

```bash
zendro create-plot -p
```

--------------------------------

### Create Empty or Default Plots with Zendro

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use `zendro create-plot` to generate new plots. Options include specifying plot names, visualization library types (plotly, d3), and menu locations (none, top, left).

```bash
zendro create-plot -p
```

```bash
zendro create-plot -f "My Plot" -t plotly -m top -n "Top Menu Item"
```

--------------------------------

### Bulk Download Records

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Downloads records into a file. Specify file path, model name, and optionally if downloading from a remote server.

```bash
zendro bulk-download -f <file_path> -n <model_name> -r
```

--------------------------------

### Stop Zendro Services

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Use `zendro stop` to halt all running Zendro services. Include the `-p` option to stop services running in production mode.

```bash
zendro stop
```

```bash
zendro stop -p
```

--------------------------------

### Bulk Create Records from Files

Source: https://context7.com/zendro-dev/zendro/llms.txt

Uploads records from CSV, XLSX, or JSON files to the GraphQL server via mutations. Performs a validation pass before uploading. Validation errors are logged to an `errors_<uuid>.log` file. Use `-r` for remote server mode.

```bash
cd my-app/graphql-server

zendro bulk-create -f ../import/country.csv -n country
```

```bash
zendro bulk-create -f ../import/data.xlsx -n city -s Sheet1
```

```bash
zendro bulk-create -f ../import/river.json -n river
```

```bash
zendro bulk-create -f ./country.csv -n country -r
```

```text
"country_id","name","population","addCities"
"MX","Mexico","128932753","NULL"
"DE","Germany","83783942","NULL"
```

--------------------------------

### Stop Zendro Docker Instance and Remove Volumes

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Execute `zendro dockerize -d -p -v` to stop a production mode Zendro Docker instance and remove all associated volumes.

```bash
zendro dockerize -d -p -v
```

--------------------------------

### Stop Zendro Docker Service

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Execute `zendro dockerize -d` to stop the Zendro Docker service. Add `-p` if the service is running in production mode.

```bash
zendro dockerize -d
```

```bash
zendro dockerize -d -p
```

--------------------------------

### Stop Zendro Services

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Stops Zendro services. By default, stops all services. Can specify individual services like 'gqs', 'spa', or 'giql'.

```bash
zendro stop
```

```bash
zendro stop -p
```

```bash
zendro stop gqs
```

--------------------------------

### Revert Last Migration

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Reverts the last executed database migration. Migration logs are stored in `zendro_migration_log.json`.

```bash
zendro migration:down
```

--------------------------------

### Rollback Last Database Migration

Source: https://context7.com/zendro-dev/zendro/llms.txt

Rolls back the last successfully executed database migration. Updates migration state and logs the drop operation. By default, it errors if records exist; set `DOWN_MIGRATION=true` in `.env` to force the drop.

```bash
cd my-app/graphql-server
zendro migration:down
```

--------------------------------

### Export Plots with ModelLayout

Source: https://github.com/zendro-dev/zendro/blob/master/plot/raincloud_plot.txt

Exports the Plots component with a default Zendro ModelLayout. This integrates the plots seamlessly into the Zendro experience. Remove this line for full page customization.

```javascript
// Export the plots using the default zendro Modellayout. This ensures that your
// new page will be integrated seamlessly into the existing zendro experience.
// If you want to fully customize the page, just delete the following line.
Plots.layout = ModelLayout;

export default Plots;
```

--------------------------------

### Create Empty Plot with D3

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Generates an empty plot named 'circle' using the 'd3' library. The '-m left' option places it in the left menu. Customize data processing in single-page-app/src/pages/circle.tsx and plot parameters in single-page-app/src/zendro/plots/circle.tsx.

```bash
zendro create-plot -f circle -t d3 -m left
```

--------------------------------

### Create Empty Plot with Plotly

Source: https://github.com/zendro-dev/zendro/blob/master/README.md

Generates an empty plot named 'barchart' using the 'plotly' library. The '-m top' option places it in the top menu. Customize data processing in single-page-app/src/pages/barchart.tsx and plot parameters in single-page-app/src/zendro/plots/barchart.tsx.

```bash
zendro create-plot -f barchart -t plotly -m top
```

--------------------------------

### Zendro Selector Component (React)

Source: https://github.com/zendro-dev/zendro/blob/master/plot/selector.txt

This component allows users to select a data model and an attribute. It fetches data based on these selections, handling pagination and potential timeouts. Requires Material-UI and Zendro client hooks.

```typescript
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import { MAX_RECORD_LIMIT } from '@/config/globals';
import inflection from 'inflection';
import dataModels from '@/build/models.preval';
import { ReactElement, useState, useEffect } from 'react';
import { useToastNotification, useZendroClient } from '@/hooks';
import { useTranslation } from 'react-i18next';
import FormHelperText from '@mui/material/FormHelperText';
type SelectorProps = {
  attribute: string;
  handleChangeForAttributes: (event: SelectChangeEvent) => void;
  setData: (records: number[]) => void;
  helperText?: string;
};

export default function SelectLabels({
  attribute,
  handleChangeForAttributes,
  setData,
  helperText,
}: SelectorProps): ReactElement {
  const zendro = useZendroClient();
  const { showSnackbar } = useToastNotification();
  const { t } = useTranslation();
  const [model, setModel] = useState('');

  const modelCandidates = Object.keys(dataModels);
  const attributeCandidates = 
    model != ''
      ? dataModels[model].attributes
          .filter((x) => ['Float', 'Int'].includes(x.type))
          .map((x) => x.name)
      : ['None'];

  const handleChangeForModel = (event: SelectChangeEvent): void => {
    setModel(event.target.value);
  };

  useEffect(() => {
    if (model != '' && attribute != '') {
      // fetch data with graphql query and parse data
      const fetchData = async (): Promise<void> => {
        //get connection resolver
        const connectionResolver = inflection.pluralize(model) + 'Connection';
        //pagination
        const batchStep = {
          first: MAX_RECORD_LIMIT,
          after: null,
        };
        let hasNextPage = true;
        const records: number[] = [];
        const MAX_TIME = 100000;
        let PASSED_TIME = 0;
        // timeout
        while (hasNextPage && PASSED_TIME <= MAX_TIME) {
          const startTime = new Date();
          let res: any = await zendro.request(
            `{${connectionResolver}( pagination: {first:${batchStep.first}${ 
              batchStep.after ? ', after:"' + batchStep.after + '"' : '' 
            }}){
            pageInfo{
              hasNextPage
              endCursor
            }
            ${inflection.pluralize(model)} {
              ${attribute}
            }        
          }}`
          );
          res = res[connectionResolver];
          records.push(
            ...res[inflection.pluralize(model)].map((x: any) => x[attribute])
          );
          hasNextPage = res.pageInfo.hasNextPage;
          batchStep['after'] = res.pageInfo.endCursor;
          PASSED_TIME += Number(new Date()) - Number(startTime);
        }
        if (PASSED_TIME > MAX_TIME) {
          showSnackbar(
            `${t('warnings.exceed-time-limit', {
              number: records.length,
              modelName: model,
            })}`,
            'warning'
          );
        }
        setData(records);
      };
      fetchData();
    }
  }, [attribute]);
  return (
    <div>
      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="model-select-helper-label">Model</InputLabel>
        <Select
          labelId="model-select-helper-label"
          id="model-select-helper"
          value={model}
          label="Model"
          onChange={handleChangeForModel}
        >
          {modelCandidates.map((x, index) => (
            <MenuItem key={`${index}-${x}`} value={x}>
              {x}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="attr-select-helper-label">Attribute</InputLabel>
        <Select
          labelId="attr-select-helper-label"
          id="attr-select-helper"
          value={attribute}
          label="Attribute"
          onChange={handleChangeForAttributes}
        >
          {attributeCandidates.map((x, index) => (
            <MenuItem key={`${index}-${x}`} value={x}>
              {x}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{helperText}</FormHelperText>
      </FormControl>
    </div>
  );
}
```

--------------------------------

### Dynamic D3 Plot Component in Next.js

Source: https://github.com/zendro-dev/zendro/blob/master/plot/d3_page.txt

Dynamically imports a custom D3 plot component for client-side rendering. This is useful for components that rely on browser-specific APIs or heavy client-side logic.

```javascript
import React from "react";
import dynamic from "next/dynamic";
import { ModelLayout, PageWithLayout } from "@/layouts";

import { useZendroClient } from "@/hooks";

import { useState, useEffect } from "react";

import { useSession } from "next-auth/react";

const D3Plot = dynamic(() => import('@/zendro/plots/customD3Plot'), {
  ssr: false,
});

const Plots: PageWithLayout = () => {
  useSession();
  const zendro = useZendroClient();
  const [data, setData] = useState(null);
  useEffect(() => {
    // fetch data with graphql query, parse data and set data
    const fetchData = async (): Promise<void> => {
      // add graphql query
      let res:any = await zendro.request(``);
      // parse data and set data
      setData(res);
    };
    fetchData();
  }, []);

  return (
    data && (
      <svg className="main-svg" width="100%" height="100%">
        <D3Plot
          // pass any plot parameters, including data
          data={data}
        />
      </svg>
    )
  );
};

// Export the plots using the default zendro Modellayout. This ensures that your
// new page will be integrated seamlessly into the existing zendro experience.
// If you want to fully customize the page, just delete the following line.
Plots.layout = ModelLayout;

export default Plots;

```

--------------------------------

### Define Plot Container Styles with makeStyles

Source: https://github.com/zendro-dev/zendro/blob/master/plot/raincloud_plot.txt

Defines CSS styles for the plot container using Material-UI's makeStyles hook. This ensures the plot area has appropriate display, overflow, and padding properties.

```javascript
const useStyles = makeStyles(() =>
  createStyles({
    plotContainer: {
      display: 'flex',
      flexDirection: 'column',
      overflow: 'auto',
      padding: '2rem',
    },
  })
);
```

--------------------------------

### Render Colored Raincloud Plot with PlotlyPlot

Source: https://github.com/zendro-dev/zendro/blob/master/plot/raincloud_plot.txt

This snippet demonstrates how to configure and render a colored raincloud plot using the PlotlyPlot component. It dynamically generates data series based on the 'group' and 'direction' props, setting up violin plot configurations for visualization.

```javascript
        {group != null && group > 0 && display && (
          <PlotlyPlot
            // pass any plot parameters, including data
            data={[...Array(group).keys()].map((num) => ({
              ...(direction && { y: data['group' + num] }),
              ...(!direction && { x: data['group' + num] }),
              points: 'all',
              pointpos: -0.5,
              box: {
                visible: true,
              },
              //   jitter: 0.5,
              spanmode: spanMode,
              side: 'positive',
              name: attributes['group' + num],
              fillcolor: 'cls',
              type: 'violin',
            }))}
            title={'colored raincloud plot'}
            yTickAngle={!direction ? angle : undefined}
            xTickAngle={direction ? angle : undefined}
          />
        )}
```

--------------------------------

### React Component for Plotly Chart

Source: https://github.com/zendro-dev/zendro/blob/master/plot/plotly_page.txt

This React component fetches data and renders a Plotly chart. It uses `useState` and `useEffect` for data management and `useZendroClient` for data fetching. Ensure the `PlotlyPlot` component is correctly imported.

```javascript
import React from "react";
import dynamic from "next/dynamic";
import { ModelLayout, PageWithLayout } from "@/layouts";

import { createStyles, makeStyles } from "@mui/styles";
import { useZendroClient } from "@/hooks";

import { useState, useEffect } from "react";

import { useSession } from "next-auth/react";

const PlotlyPlot = dynamic(() => import("@/zendro/plots/customPlotlyPlot"), {
  ssr: false,
});

const Plots: PageWithLayout = () => {
  useSession();
  const zendro = useZendroClient();
  const [data, setData] = useState(null);
  useEffect(() => {
    // fetch data with graphql query, parse data and set data
    const fetchData = async (): Promise<void> => {
      // add graphql query
      let res = await zendro.request(``);
      // parse data and set data
      setData(res);
    };
    fetchData();
  }, []);

  // add custom classes
  const classes = useStyles();

  return (
    // Generic plot container. Feel free to change
    <div className={classes.plotContainer}>
      <PlotlyPlot
        // pass any plot parameters, including data
        data={data}
      />
    </div>
  );
};

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    plotContainer: {
      display: "flex",
      flexDirection: "column",
      overflow: "auto",
      padding: "2rem",
    },
  })
);

// Export the plots using the default zendro Modellayout. This ensures that your
// new page will be integrated seamlessly into the existing zendro experience.
// If you want to fully customize the page, just delete the following line.
Plots.layout = ModelLayout;

export default Plots;
```

--------------------------------

### Box Plot Component Implementation

Source: https://github.com/zendro-dev/zendro/blob/master/plot/boxplot.txt

This is the main React component for rendering a configurable box plot. It manages state for plot display, direction, grouping, data, attributes, and tick angle. It includes input fields for numerical attributes and switches for display and direction toggles.

```javascript
import React from 'react';
import { ModelLayout, PageWithLayout } from '@/layouts';
import { createStyles, makeStyles } from '@mui/styles';
import { useState } from 'react';
import { useSession } from 'next-auth/react';
import SelectLabels from '@/zendro/plots/data-model-field-selector';
import { SelectChangeEvent } from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Switch from '@mui/material/Switch';
import IntField from '@/zendro/record-fields/int-field';
import dynamic from 'next/dynamic';
const PlotlyPlot = dynamic(() => import('@/zendro/plots/defaultPlotlyPlot'), {
  ssr: false,
});

const Plots: PageWithLayout = () => {
  useSession();
  const [display, setDisplay] = useState(false);
  const [direction, setDirection] = useState(false);
  const [group, setGroup] = useState<number | null>(0);

  const [data, setData] = useState<any>({});
  const [attributes, setAttributes] = useState<any>({});
  const [angle, setAngle] = useState<number>(0);

  const handleChangeForDisplay = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    setDisplay(event.target.checked);
  };
  const handleChangeForDirection = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    setDirection(event.target.checked);
  };
  const handleChangeForAttributes =
    (index: string) => (event: SelectChangeEvent) => {
      setAttributes({ ...attributes, [index]: event.target.value });
    };
  const changeData = (index: string) => (records: number[]) => {
    setData({ ...data, [index]: records });
  };
  // add custom classes
  const classes = useStyles();

  return (
    // Generic plot container. Feel free to change
    <div className={classes.plotContainer}>
      <Stack direction="row" spacing={2}>
        <Stack direction="column" spacing={2}>
          <Typography variant="h6" gutterBottom>
            The number of numerical attributes:
          </Typography>
          <IntField
            value={group}
            onChange={(value) => {
              if (value == null || value >= 0) {
                setGroup(value);
                setData(
                  Object.fromEntries(
                    [...Array(value).keys()].map((x) => ['group' + x, []])
                  )
                );
                setAttributes(
                  Object.fromEntries(
                    [...Array(value).keys()].map((x) => ['group' + x, ''])
                  )
                );
              }
            }}
            onError={(err) => {
              if (err) {
                console.log('error:', err);
              }
            }}
          />
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Direction:</Typography>
            <Typography>Horizontal</Typography>
            <Switch
              checked={direction}
              onChange={handleChangeForDirection}
              inputProps={{ 'aria-label': 'controlled' }}
            />
            <Typography>Vertical</Typography>
          </Stack>
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Tickangle:</Typography>
            <IntField
              value={angle}
              onChange={(value) => {
                if (value) {
                  setAngle(value);
                }
              }}
              onError={(err) => {
                if (err) {
                  console.log('error:', err);
                }
              }}
            />
          </Stack>
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="h6">Display:</Typography>
            <Switch
              checked={display}
              onChange={handleChangeForDisplay}
              inputProps={{ 'aria-label': 'controlled' }}
            />
          </Stack>
          {group != null &&
            group > 0 &&
            [...Array(group).keys()].map((x) => (
              <SelectLabels
                key={'select-group-' + x}
                setData={changeData('group' + x)}
                attribute={attributes['group' + x]}
                handleChangeForAttributes={handleChangeForAttributes(
                  'group' + x
                )}
                helperText={`attribute ${x + 1}`}
              />
            ))}
        </Stack>

        {group != null && group > 0 && display && (
          <PlotlyPlot
            // pass any plot parameters, including data
            data={[...Array(group).keys()].map((num) => ({
              ...(direction && { y: data['group' + num] }),
              ...(!direction && { x: data['group' + num] }),
              name: attributes['group' + num],
              fillcolor: 'cls',
              type: 'box',
            }))}
            title={'colored box plot'}
            yTickAngle={!direction ? angle : undefined}
            xTickAngle={direction ? angle : undefined}
          />
        )}

```
Tokens:
Raw