Mockup Graphics Entities
Bar Chart
- Preview
- Usage
- Definition
import { BarChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<BarChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BAR_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, BAR_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.barChart;strokeColor=none;strokeColor2=none;strokeColor3=#666666;fillColor2=#008cff;fillColor3=#dddddd;',
},
_width: 400,
_height: 200,
}
Bubble Chart
- Preview
- Usage
- Definition
import { BubbleChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<BubbleChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BUBBLE_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, BUBBLE_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.bubbleChart;strokeColor=none;strokeColor2=none;strokeColor3=#666666;fillColor2=#008cff;fillColor3=#dddddd;',
},
_width: 400,
_height: 200,
}
Column Chart
- Preview
- Usage
- Definition
import { ColumnChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<ColumnChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COLUMN_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, COLUMN_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.columnChart;strokeColor=none;strokeColor2=none;strokeColor3=#666666;fillColor2=#008cff;fillColor3=#dddddd;',
},
_width: 400,
_height: 200,
}
Gantt Chart
- Preview
- Usage
- Definition
import { GanttChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<GanttChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { GANTT_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, GANTT_CHART)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.graphics.rrect;rSize=0;strokeColor=#999999;',
},
_width: 0,
_height: 300,
}
Gauge
- Preview
- Usage
- Definition
import { Gauge } from '@dinghy/diagrams/entitiesMockupGraphics'
<Gauge/>
// or
import { extendStyle } from "@dinghy/base-components";
import { GAUGE } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, GAUGE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.gauge;fillColor=#ffffff;strokeColor=#999999;gaugePos=25;scaleColors=#bbddff,#ddeeff,#99ccff;gaugeLabels=,,;needleColor=#008cff;',
},
_original_width: 100,
_original_height: 100,
}
Icon Grid
- Preview
- Usage
- Definition
import { IconGrid } from '@dinghy/diagrams/entitiesMockupGraphics'
<IconGrid/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ICON_GRID } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, ICON_GRID)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.simpleIcon;strokeColor=#999999;fillColor=#ffffff;',
},
_original_width: 200,
_original_height: 200,
}
Icon Placeholder
- Preview
- Usage
- Definition
import { IconPlaceholder } from '@dinghy/diagrams/entitiesMockupGraphics'
<IconPlaceholder/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ICON_PLACEHOLDER } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, ICON_PLACEHOLDER)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.simpleIcon;strokeColor=#999999;',
},
_original_width: 50,
_original_height: 50,
}
Line Chart
- Preview
- Usage
- Definition
import { LineChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<LineChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LINE_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, LINE_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.lineChart;strokeColor=none;strokeColor2=#666666;strokeColor3=#008cff;strokeColor4=#dddddd;',
},
_width: 400,
_height: 200,
}
Map
- Preview
- Usage
- Definition
import { Map } from '@dinghy/diagrams/entitiesMockupGraphics'
<Map/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MAP } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, MAP)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.map;',
},
_original_width: 250,
_original_height: 250,
}
Pie Chart
- Preview
- Usage
- Definition
import { PieChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<PieChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PIE_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, PIE_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.pieChart;strokeColor=#008cff;parts=10,20,35;partColors=#e0e0e0,#d0d0d0,#c0c0c0,#b0b0b0,#a0a0a0;strokeWidth=2;',
},
_original_width: 200,
_original_height: 200,
}
Plot Chart
- Preview
- Usage
- Definition
import { PlotChart } from '@dinghy/diagrams/entitiesMockupGraphics'
<PlotChart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PLOT_CHART } from '@dinghy/diagrams/entitiesMockupGraphics'
<Shape
{...props}
_style={extendStyle(props, PLOT_CHART)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.graphics.plotChart;strokeColor=none;strokeColor2=#aaaaaa;strokeColor3=#666666;fillColor2=#99aaff,#0022ff,#008cff;',
},
_width: 400,
_height: 200,
}