socialhose/socialhose-php
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

at the end of the day, it was inevitable

Browse Source
This commit is contained in:
Mo Elzubeir
2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/common/charts/ChartsOptions.js
+138
View File
@@ -0,0 +1,138 @@
export const BarToolbox = {
feature: {
saveAsImage: {
name: 'Socialhose Chart',
show: true,
title: 'Save as Image',
// name: 'Results Over Time', // need to set dynamic
type: 'jpeg',
backgroundColor: '#FFFFFF',
pixelRatio: 2
},
dataZoom: {
show: true,
title: {
zoom: 'Zoom',
back: 'Restore Zoom'
}
},
dataView: {
show: true,
title: 'View Data',
readOnly: true,
lang: ['View Data', 'Close', 'Refresh']
},
magicType: {
show: true,
title: {
line: 'Line Chart',
bar: 'Bar Chart',
tiled: 'Tiled Chart'
},
type: ['line', 'bar', 'tiled']
},
restore: { show: true, title: 'Restore' }
}
}
export const PieToolbox = {
feature: {
saveAsImage: {
name: 'Socialhose Chart',
show: true,
title: 'Save as Image',
// name: 'Share of Topics', // need to set dynamic
type: 'jpeg',
backgroundColor: '#FFFFFF',
pixelRatio: 2
},
dataView: {
show: true,
readOnly: true,
title: 'View Data',
lang: ['View Data', 'Close', 'Refresh']
},
restore: { show: true, title: 'Restore' }
}
}
export function getBarOptions(data, labels) {
return {
tooltip: {
show: true
},
toolbox: BarToolbox,
xAxis: {
type: 'category',
data: labels
},
yAxis: {
type: 'value'
},
series: data,
legend: {
y: 'bottom',
show: true
}
}
}
export function getPieOptions(data) {
return {
tooltip: {
show: true
},
toolbox: PieToolbox,
series: {
type: 'pie',
data: data,
label: {
position: 'outer',
alignTo: 'none',
bleedMargin: 5
},
top: '10%',
bottom: '10%'
},
legend: {
top: 'bottom',
show: true
}
}
}
export const WordCloudOptions = {
type: 'wordCloud',
shape: 'circle',
sizeRange: [12, 35],
rotationRange: [0, 0],
width: '100%',
height: '100%',
top: '10%',
bottom: '10%',
drawOutOfBound: false,
gridSize: 8,
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
// Color can be a callback function or a color string
color: function () {
// Random color
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') +
')'
)
}
},
emphasis: {
shadowBlur: 1,
shadowColor: '#333'
}
}
}
frontend/app/components/common/charts/ECharts.js
+70
View File
@@ -0,0 +1,70 @@
import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import echarts from 'echarts'
import cx from 'classnames'
function ECharts(props) {
const { options, style, className, loading, message } = props
const [chart, setChart] = useState(null)
const chartRef = useRef()
useEffect(() => {
const chart = echarts.init(chartRef.current, 'westeros')
chart.setOption({ ...options, resizeObserver }, true) // second param is for 'noMerge'
setChart(chart)
if (resizeObserver) resizeObserver.observe(chartRef.current)
}, [options])
useEffect(() => {
if (!chart) {
return
}
if (loading) {
chart.showLoading()
return
}
chart.hideLoading()
}, [chart, loading])
useEffect(() => {
if (chart && options && message) {
chart.clear()
}
}, [message])
const newStyle = {
height: 350,
...style
}
return (
<div className="echarts-parent position-relative">
<div
ref={chartRef}
style={newStyle}
className={cx('echarts-react', className)}
/>
{message ? <div className="no-data">{message}</div> : null}
</div>
)
}
ECharts.propTypes = {
loading: PropTypes.bool,
options: PropTypes.any,
className: PropTypes.string,
style: PropTypes.object,
message: PropTypes.any
}
const resizeObserver = new window.ResizeObserver((entries) => {
entries.map(({ target }) => {
const instance = echarts.getInstanceByDom(target)
if (instance) {
instance.resize()
}
})
})
export default React.memo(ECharts)
frontend/app/components/common/charts/WesterosTheme.json
+382
View File
@@ -0,0 +1,382 @@
{
"color": ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "2"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "2"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
}
},
"graph": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
"label": {
"color": "#eeeeee"
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "#516b91"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "#516b91"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": ["#eeeeee"]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999999"
},
"emphasis": {
"borderColor": "#516b91"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#8fd3e8",
"borderWidth": 1
},
"emphasis": {
"color": "#8fd3e8"
}
},
"controlStyle": {
"normal": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"emphasis": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "rgba(138,124,168,0.37)"
},
"label": {
"normal": {
"textStyle": {
"color": "#8fd3e8"
}
},
"emphasis": {
"textStyle": {
"color": "#8fd3e8"
}
}
}
},
"visualMap": {
"color": ["#516b91", "#59c4e6", "#a5e7f0"]
},
"dataZoom": {
"backgroundColor": "rgba(0,0,0,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#333333"
}
},
"markPoint": {
"label": {
"color": "#eeeeee"
},
"emphasis": {
"label": {
"color": "#eeeeee"
}
}
}
}