Four Production-Ready Data Dashboards from Two npm Packages and a JSON Config

I built a complete demo project called screen-demo in just a few hours using two packages already published to npm, directly assembling four sets of dashboards for different industry verticals. The goal: out-of-the-box, configurable, and ready for secondary development.

Two core dependencies:

• @lius1314/china-map-3d-designer v1.1.5 — 3D China Map Designer SDK
• @lius1314/visual-dashboard-scaffold v1.2.3 — Visual Dashboard Scaffold SDK

Let's take a look at what these four dashboards look like and what capabilities they use.

---

1. Smart Cultural Tourism Scenic Area Operations Dashboard

Industry Vertical: Cultural Tourism / Scenic Areas / City Operations

This dashboard adopts a blue-purple tech style, with a gradient font title at the top and a bottom Dock navigation that can switch between four sub-pages:

• Cultural Tourism Overview: Real-time visitor flow trends, popular scenic area rankings, visitor source proportions, service response trends, service capability radar, and scenic area indicator TOP rankings are distributed on the left and right sides; the center features a 3D scenic area visitor flow situation map.
• Visitor Flow Perception: Three 3D flip cards on the left + a large 3D map on the right, highlighting visitor flow hotspots.
• Trend Analysis: A symmetrical left-right layout with eight indicator cards surrounding the central map, suitable for macro trend analysis.
• Service Operations: A service category menu on the left + top key indicators + a central service operations desk.

Technical Highlights:

• The bottom Dock uses the footer behavior configuration of visual-dashboard-scaffold to switch pages on click.
• The central 3D map uses the pure display mode of china-map-3d-designer, connected to scenic area visitor flow data.
• Card backgrounds, title decorations, and entry animations are all adjusted through the configuration panel, with no hard-coded CSS.

---

2. Smart Logistics Park Operations Dashboard

Industry Vertical: Logistics / Parks / Supply Chain

A green-themed dashboard with a more compact overall layout, emphasizing core business indicators such as orders, warehousing, transport capacity, and fulfillment:

• Left: Order throughput trends, warehousing turnover rankings, on-time fulfillment KPIs
• Right: Transport capacity structure proportions, active vehicle trends, trunk line business TOP rankings
• Center: Trunk line transport situation map (3D map)

This dashboard fully leverages the pixel layout advantages of visual-dashboard-scaffold: the left and right cards are strictly aligned with the design draft positions, and the central map occupies the core visual area. There is no bottom navigation overall, making it suitable for long-term single-page display.

---

3. Industrial IoT Equipment Operations Dashboard

Industry Vertical: Industry / IoT / Equipment Operations

A cyan-blue industrial style, with a national equipment monitoring situation map in the center and three indicator cards symmetrically arranged on the left and right:

• Left: Equipment online trends, equipment work order events, production line heatmap rankings
• Right: Service capability radar, equipment type proportions, SLA achievement rate

This dashboard focuses on demonstrating how to map operational data such as equipment status, alarm events, and SLAs onto a 3D map. The bar charts and scatter points on the map are data-driven by the MapDataInput of china-map-3d-designer, making regional value levels visible at a glance.

---

4. Green Energy Low-Carbon Operations Dashboard

Industry Vertical: Energy / Dual Carbon / Electric Power

A silver-white + light blue cool color scheme with a stronger tech feel, and also the dashboard with the most pages:

• Energy Overview: Load trends on the left and right, energy site rankings, resource structure proportions, low-carbon capability radar, and a central energy low-carbon situation map.
• Load Monitoring: A large 3D map + top energy core indicators + rankings and trends on both sides.
• Trend Analysis: Eight indicator cards + central situation map + bottom situation trends.
• System Management: A scheduling menu on the left + an energy node resource table on the right.
• Operations Work Orders: A full-screen work order desk.
• Guangdong Province Energy Perspective: A separate provincial-level map display, demonstrating the initialRegion fixed-region capability of china-map-3d-designer.

The bottom Dock also supports multi-page switching and includes an independent provincial map entry.

---

What Problems Do the Two npm Packages Solve?

@lius1314/china-map-3d-designer

A 3D China map visualization designer SDK based on Three.js, primarily responsible for the map itself:

• 3D provincial/municipal map rendering, supporting double-click drill-down;
• 9 major configurable layers including top surface, side surface, borders, particles, bar charts, flight lines, scatter points, and labels;
• WYSIWYG designer mode, exporting JSON for production use;
• Supports fixed display of a specific province (e.g., Guangdong Province energy perspective).

If you want to delve deeper into the design philosophy, theme presets, and configuration workflow of the 3D map designer itself, you can read this article I wrote earlier:

I Built a 3D China Map Designer with Three.js, Out-of-the-Box

@lius1314/visual-dashboard-scaffold

A visual dashboard scaffold, primarily responsible for "assembling maps and charts into a complete dashboard":

• Drag, zoom, copy, and delete blocks in edit mode;
• Multi-page routing and bottom Dock navigation;
• Three-layer layout (header, middle, footer), with global and page configuration separated;
• Block registration mechanism, compatible with ECharts, 3D maps, and business tables;
• Built-in themes, backgrounds, cards, fonts, and icon resources;
• Configuration import/export, local persistence, page parameter passing, and event communication.

If you need a dashboard framework that "allows you to adjust layouts yourself, export configurations, and deliver to business stakeholders," you can check out this article:

Visual Dashboard Designer Scaffold: A One-Stop Solution from Design to Delivery

---

Why "Out-of-the-Box"

The screen-demo project has already done two things:

1. Static Resource Sync: Theme images from visual-dashboard-scaffold and GeoJSON from china-map-3d-designer are automatically copied to the public/ directory via a postinstall script.
2. Default Configurations Written: The JSON configurations for the four dashboards are placed in src/config/default-dashboard-theme1.json through theme4.json, ready to be imported and rendered directly.

You only need to:

npm install
npm run dev

to see all four dashboards. Replacing data, adjusting layouts, and adding/removing pages can all be done in edit mode.

---

Who It's For

• Frontend/visualization developers who need to quickly produce demos;
• Projects in smart cultural tourism, smart logistics, industrial internet, and energy dual-carbon directions;
• Teams looking to separate the "dashboard framework" from "business charts";
• Developers wanting to do secondary delivery based on mature npm packages.

---

Final Words

screen-demo is not about writing four dashboards from scratch, but validating an idea: push common capabilities down to npm packages, leaving the business layer to only handle configuration and data. This way, the same team can reuse the same dashboard framework across different projects, and the 3D map part can also iterate independently.

If you are interested in the 3D map designer, I recommend reading my previous paid article; if you need more complete dashboard orchestration and delivery capabilities, you can check out the article published simultaneously with this one.

Related Resources:

• npm: @lius1314/china-map-3d-designer v1.1.5
• npm: @lius1314/visual-dashboard-scaffold v1.2.3
• Demo project: screen-demo

The demo source code has been placed at the bottom of the same-titled article on my public account (柳杉前端). You can go get it if you need it.

Disclaimer

The built-in image resources (background images, card materials, header title decorations, icons, etc.) and font files (YouSheBiaoTiHei, Alibaba PuHuiTi, DS-Digital, PangMenZhengDao BiaoTiTi, Source Han Sans, etc.) in this project are all sourced from the internet, for learning and reference purposes only, and must not be used for commercial purposes. If there is any infringement of your copyright, please contact the author for removal.