Frontend Implementation of a Visual Data Dashboard System (Big)

Background: As the company's business expands, there is a growing demand for data‑screen dashboards. Existing solutions (manual coding or Alibaba Cloud DataV) have drawbacks such as repetitive work, poor reusability, cost, and lack of on‑premise deployment, prompting the team to build an internal visual dashboard system called “Big”.

What is Big: “Big” is a front‑end visual‑dashboard framework built on the “Luban” platform, named after the translation of “big screen”. It provides a component library and a low‑code editor for rapid construction of data‑screen applications.

Advantages of a self‑built system: high customizability, on‑premise deployment, elimination of the need to maintain two data warehouses, cost reduction and enhanced data‑product capability.

Overall architecture: A data screen consists of basic elements (line, bar, pie charts, titles, backgrounds, borders). The editor page is divided into top bar, component panel, canvas, and data‑configuration panel. Components are placed on the canvas using vue-draggable-resizable for drag‑and‑resize, and their properties are bound via props and event‑bus communication.

Editing workflow: Component data is stored in the app state (no Vuex yet) and passed to child components via props. Changes are propagated upward through an event bus, and the configuration panel reflects the selected component’s schema‑defined fields (input, select, image, etc.).

Component design: Each component has a schema.json that defines editable props and default models . The schema drives the dynamic generation of the configuration UI and the component’s default appearance.

Key code snippets:

<div v-for="item in preCompList" :class="[... ]" :key="item.info.activePreviewId">
  <vue-draggable-resizable :w="item.models.width || 100" :h="item.models.height || 100"
    :x="item.models.x || 0" :y="item.models.y || 0"
    @dragging="onDrag" @resizing="onResize">
    <navigator-line :x="item.models.x" :y="item.models.y" :scale="scale"/>
    <component :is="item.info.name" :models="item.models"/>
  </vue-draggable-resizable>
</div>

// Global event bus
Vue.prototype.$eventBus = new Vue();
this.$eventBus.$emit('eventName', 'payload');
this.$eventBus.$on('eventName', v => console.log(v));

{
  "props": [
    {
      "info": {"title":"配置","icon":"icon-setting"},
      "fields": [
        {"title":"组件宽度","name":"width","type":"number"},
        {"title":"组件高度","name":"height","type":"number"},
        {"title":"x轴坐标","name":"x","type":"number"},
        {"title":"y轴坐标","name":"y","type":"number"}
      ]
    }
  ],
  "models": {"width":300,"height":200,"x":0,"y":0}
}

function resizeFull() {
  var ratioX = $(window).width() / window.scr.width;
  var ratioY = $(window).height() / window.scr.height;
  $('body').css({
    transform: "scale(" + ratioX + ", " + ratioY + ")",
    transformOrigin: "left top",
    backgroundSize: "100% 100%"
  });
}

Problems addressed: component communication via an event bus, permission control by routing preview pages through a server that injects a token, and handling full‑screen scaling.

Pending improvements: grouping similar to Photoshop/Sketch, multi‑selection with alignment, code optimisation, and overall UX enhancements.

Conclusion: The “Big” system demonstrates a lightweight, extensible front‑end solution for building data‑screen dashboards, enabling non‑technical users to create professional visualisations while satisfying custom enterprise requirements.