{{ t('visualization.template_view_tips') }}
+ 你好，我是 DataEase 智能客服点击一下，开启高效解答模式~ +
extends AntVAbstractCha if (duration > 300) { return } + const canvasPosition = canvas.getBoundingClientRect() + const touchPosition = [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + const relativePosition = [ + touchPosition[0] - canvasPosition.x, + touchPosition[1] - canvasPosition.y + ] + const shape = s2Instance.container.getShape(relativePosition[0], relativePosition[1]) + // 图片单元格，表头排序图标点击放大图片 + if (shape.cfg?.type === 'image') { + return + } const callback = () => { - const canvasPosition = canvas.getBoundingClientRect() - const touchPosition = [e.changedTouches[0].pageX, e.changedTouches[0].pageY] - const relativePosition = [ - touchPosition[0] - canvasPosition.x, - touchPosition[1] - canvasPosition.y - ] - const shape = s2Instance.container.getShape(relativePosition[0], relativePosition[1]) - // 图片单元格点击放大图片 - if (shape.cfg?.parent.constructor.name === 'ImageCell') { - return - } e.preventDefault() e.stopPropagation() if (shape) { diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts index 595a29f..f20a5fe 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -1,4 +1,4 @@ -import { isEmpty, isNumber } from 'lodash-es' +import { isNumber } from 'lodash-es' import { DEFAULT_TITLE_STYLE } from '../editor/util/chart' import { equalsAny, includesAny } from '../editor/util/StringUtils' import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types' @@ -12,8 +12,7 @@ import { ElMessage } from 'element-plus-secondary' import { useI18n } from '@/hooks/web/useI18n' import { useLinkStoreWithOut } from '@/store/modules/link' import { useAppStoreWithOut } from '@/store/modules/app' -import { valueFormatter } from '@/views/chart/components/js/formatter' -import { deepCopy } from '@/utils/utils' +import { Decimal } from 'decimal.js' const appStore = useAppStoreWithOut() const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) @@ -286,17 +285,23 @@ export function handleEmptyDataStrategy(chart: Chart, opt } return options } - const { yAxis, xAxisExt, extStack } = chart + const { yAxis, xAxisExt, extStack, extBubble } = chart const multiDimension = yAxis?.length >= 2 || xAxisExt?.length > 0 || extStack?.length > 0 switch (strategy) { case 'breakLine': { - if (multiDimension) { - // 多维度保持空 - if (isChartMix) { - for (let i = 0; i < data.length; i++) { - handleBreakLineMultiDimension(data[i] as Record[]) + if (isChartMix) { + if (data[0]) { + if (xAxisExt?.length > 0 || extStack?.length > 0) { + handleBreakLineMultiDimension(data[0] as Record[]) } - } else { + } + if (data[1]) { + if (extBubble?.length > 0) { + handleBreakLineMultiDimension(data[1] as Record[]) + } + } + } else { + if (multiDimension) { handleBreakLineMultiDimension(data) } } @@ -306,22 +311,27 @@ export function handleEmptyDataStrategy(chart: Chart, opt } } case 'setZero': { - if (multiDimension) { - // 多维度置0 - if (isChartMix) { - for (let i = 0; i < data.length; i++) { - handleSetZeroMultiDimension(data[i] as Record[]) + if (isChartMix) { + if (data[0]) { + if (xAxisExt?.length > 0 || extStack?.length > 0) { + handleSetZeroMultiDimension(data[0] as Record[]) + } else { + handleSetZeroSingleDimension(data[0] as Record[]) + } + } + if (data[1]) { + if (extBubble?.length > 0) { + handleSetZeroMultiDimension(data[1] as Record[], true) + } else { + handleSetZeroSingleDimension(data[1] as Record[], true) } - } else { - handleSetZeroMultiDimension(data) } } else { - // 单维度置0 - if (isChartMix) { - for (let i = 0; i < data.length; i++) { - handleSetZeroSingleDimension(data[i] as Record[]) - } + if (multiDimension) { + // 多维度置0 + handleSetZeroMultiDimension(data) } else { + // 单维度置0 handleSetZeroSingleDimension(data) } } @@ -367,7 +377,7 @@ function handleBreakLineMultiDimension(data) { }) } -function handleSetZeroMultiDimension(data: Record[]) { +function handleSetZeroMultiDimension(data: Record[], isExt = false) { const dimensionInfoMap = new Map() const subDimensionSet = new Set() const quotaMap = new Map() @@ -375,6 +385,9 @@ function handleSetZeroMultiDimension(data: Record[]) { const item = data[i] if (item.value === null) { item.value = 0 + if (isExt) { + item.valueExt = 0 + } } const dimensionInfo = dimensionInfoMap.get(item.field) if (dimensionInfo) { @@ -391,12 +404,17 @@ function handleSetZeroMultiDimension(data: Record[]) { let subInsertIndex = 0 subDimensionSet.forEach(dimension => { if (!dimensionInfo.set.has(dimension)) { - data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, { + const _temp = { field, value: 0, category: dimension, quotaList: quotaMap.get(dimension as string) - }) + } as any + if (isExt) { + _temp.valueExt = 0 + } + + data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, _temp) } subInsertIndex++ }) @@ -405,10 +423,14 @@ function handleSetZeroMultiDimension(data: Record[]) { }) } -function handleSetZeroSingleDimension(data: Record[]) { +function handleSetZeroSingleDimension(data: Record[], isExt = false) { data.forEach(item => { if (item.value === null) { - item.value = 0 + if (!isExt) { + item.value = 0 + } else { + item.valueExt = 0 + } } }) } @@ -525,8 +547,20 @@ const getExcelDownloadRequest = (data, type?) => { } } -export const exportExcelDownload = (chart, callBack?) => { - const excelName = chart.title +function getChartExcelTitle(preFix, viewTitle) { + const now = new Date() + const pad = n => n.toString().padStart(2, '0') + const year = now.getFullYear() + const month = pad(now.getMonth() + 1) // 月份从 0 开始 + const day = pad(now.getDate()) + const hour = pad(now.getHours()) + const minute = pad(now.getMinutes()) + const second = pad(now.getSeconds()) + return `${preFix}_${viewTitle}_${year}${month}${day}_${hour}${minute}${second}` +} + +export const exportExcelDownload = (chart, preFix, callBack?) => { + const excelName = getChartExcelTitle(preFix, chart.title) let request: any = { proxy: null, dvId: chart.sceneId, @@ -589,18 +623,21 @@ export const exportExcelDownload = (chart, callBack?) => { } export const copyString = (content: string, notify = false) => { - const clipboard = navigator.clipboard || { - writeText: data => { - return new Promise(resolve => { - const textareaDom = document.createElement('textarea') - textareaDom.setAttribute('style', 'z-index: -1;position: fixed;opacity: 0;') - textareaDom.value = data - document.body.appendChild(textareaDom) - textareaDom.select() - document.execCommand('copy') - textareaDom.remove() - resolve() - }) + let clipboard = navigator.clipboard as Pick + if (!clipboard || window.top !== window.self) { + clipboard = { + writeText: data => { + return new Promise(resolve => { + const textareaDom = document.createElement('textarea') + textareaDom.setAttribute('style', 'z-index: -1;position: fixed;opacity: 0;') + textareaDom.value = data + document.body.appendChild(textareaDom) + textareaDom.select() + document.execCommand('copy') + textareaDom.remove() + resolve() + }) + } } } clipboard.writeText(content).then(() => { @@ -782,7 +819,7 @@ export function getColor(chart: Chart) { } } -export function setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { +export function setupSeriesColor(chart: ChartObj): ChartBasicStyle['seriesColor'] { const result: ChartBasicStyle['seriesColor'] = [] const seriesSet = new Set() const colors = chart.customAttr.basicStyle.colors @@ -1155,8 +1192,10 @@ export function getLineLabelColorByCondition(conditions, value, fieldId) { if (fieldConditions.length) { fieldConditions.some(item => { if ( - (item.term === 'lt' && value <= item.value) || - (item.term === 'gt' && value >= item.value) || + (item.term === 'lt' && value < item.value) || + (item.term === 'le' && value <= item.value) || + (item.term === 'gt' && value > item.value) || + (item.term === 'ge' && value >= item.value) || (item.term === 'between' && value >= item.min && value <= item.max) ) { color = item.color @@ -1210,3 +1249,27 @@ export const hexToRgba = (hex, alpha = 1) => { // 返回 RGBA 格式 return `rgba(${r}, ${g}, ${b}, ${a})` } + +// 安全计算数值字段的总和，使用 Decimal 避免浮点数精度问题 +export function safeDecimalSum(data, field) { + // 使用 reduce 累加所有行的指定字段值 + return data + .reduce((acc, row) => { + // 将字段值转换为 Decimal 类型并累加到累加器 + return acc.plus(new Decimal(row[field] ?? 0)) + }, new Decimal(0)) + .toNumber() // 最终结果转换为普通数字返回 +} + +// 安全计算数值字段的平均值，使用 Decimal 避免浮点数精度问题 +export function safeDecimalMean(data, field) { + // 如果数据为空，直接返回 0 + if (!data.length) return 0 + // 计算所有行的指定字段值的总和 + const sum = data.reduce((acc, row) => { + // 将字段值转换为 Decimal 类型并累加到累加器 + return acc.plus(new Decimal(row[field] ?? 0)) + }, new Decimal(0)) + // 将总和除以数据行数，得到平均值，并转换为普通数字返回 + return sum.dividedBy(data.length).toNumber() +} diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue index 218b986..3a02ffe 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue @@ -14,12 +14,11 @@ import { ChartLibraryType } from '@/views/chart/components/js/panel/types' import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot' import { L7PlotChartView } from '@/views/chart/components/js/panel/types/impl/l7plot' import chartViewManager from '@/views/chart/components/js/panel' -import { useAppStoreWithOut } from '@/store/modules/app' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue' import { storeToRefs } from 'pinia' import { parseJson } from '@/views/chart/components/js/util' -import { defaultsDeep, cloneDeep } from 'lodash-es' +import { defaultsDeep, cloneDeep, concat } from 'lodash-es' import ChartError from '@/views/chart/components/views/components/ChartError.vue' import { BASE_VIEW_CONFIG } from '../../editor/util/chart' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle' @@ -28,7 +27,8 @@ import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils' import { useEmitt } from '@/hooks/web/useEmitt' import { L7ChartView } from '@/views/chart/components/js/panel/types/impl/l7' import { useI18n } from '@/hooks/web/useI18n' -import { ExportImage,Scale } from '@antv/l7' +import { ExportImage } from '@antv/l7' +import { configEmptyDataStyle } from '@/views/chart/components/js/panel/common/common_antv' const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack, inMobile } = @@ -75,6 +75,11 @@ const props = defineProps({ type: String, required: false, default: 'inherit' + }, + active: { + type: Boolean, + required: false, + default: true } }) @@ -89,6 +94,14 @@ const emit = defineEmits([ const g2TypeSeries1 = ['bidirectional-bar'] const g2TypeSeries0 = ['bar-range'] const g2TypeTree = ['circle-packing'] +const g2TypeStack = [ + 'bar-stack', + 'bar-group-stack', + 'percentage-bar-stack', + 'bar-stack-horizontal', + 'percentage-bar-stack-horizontal' +] +const g2TypeGroup = ['bar-group'] const { view, showPosition, scale, terminal, suffixId } = toRefs(props) @@ -132,7 +145,10 @@ const clearLinkage = () => { } const reDrawView = () => { linkageActiveHistory.value = false - myChart?.render() + const slider = myChart?.chart?.getController('slider') + if (!slider) { + myChart?.render() + } } const linkageActivePre = () => { if (linkageActiveHistory.value) { @@ -144,43 +160,103 @@ const linkageActivePre = () => { } const linkageActive = () => { linkageActiveHistory.value = true + myChart?.setState('active', () => true, false) + myChart?.setState('inactive', () => true, false) + myChart?.setState('selected', () => true, false) myChart?.setState('active', param => { if (Array.isArray(param)) { return false } else { - if (checkSelected(param)) { - return true - } + return checkSelected(param) } }) myChart?.setState('inactive', param => { if (Array.isArray(param)) { return false } else { - if (!checkSelected(param)) { - return true - } + return !checkSelected(param) + } + }) + myChart?.setState('selected', param => { + if (Array.isArray(param)) { + return false + } else { + return checkSelected(param) } }) } const checkSelected = param => { + // 获取当前视图的所有联动字段ID + const mappingFieldIds = Array.from( + new Set( + (view.value.type.includes('chart-mix') + ? concat(chartData.value?.left?.fields, chartData.value?.right?.fields) + : chartData.value?.fields + ) + .map(item => item?.id) + .filter(id => + Object.keys(nowPanelTrackInfo.value).some( + key => key.startsWith(view.value.id) && key.split('#')[1] === id + ) + ) + ) + ) + // 维度字段匹配 + const [xAxis, xAxisExt, extStack] = ['xAxis', 'xAxisExt', 'extStack'].map(key => + view.value[key].find(item => mappingFieldIds.includes(item.id)) + ) + // 选中字段数据 + const { group, name, category } = state.linkageActiveParam + // 选中字段数据匹配 if (g2TypeSeries1.includes(view.value.type)) { - return state.linkageActiveParam.name === param.field + return name === param.field } else if (g2TypeSeries0.includes(view.value.type)) { - return state.linkageActiveParam.category === param.category + return category === param.category } else if (g2TypeTree.includes(view.value.type)) { - if ( - param.path?.startsWith(state.linkageActiveParam.name) || - state.linkageActiveParam.name === t('commons.all') - ) { + if (param.path?.startsWith(name) || name === t('commons.all')) { return true } - return state.linkageActiveParam.name === param.name + return name === param.name + } else if (g2TypeGroup.includes(view.value.type)) { + const isNameMatch = name === param.name || (name === 'NO_DATA' && !param.name) + const isCategoryMatch = category === param.category + if (xAxis && xAxisExt) { + return isNameMatch && isCategoryMatch + } + if (xAxis && !xAxisExt) { + return isNameMatch + } + if (!xAxis && xAxisExt) { + return isCategoryMatch + } + return false + } else if (g2TypeStack.includes(view.value.type)) { + const isGroupMatch = group === param.group || (group === 'NO_DATA' && !param.group) + const isNameMatch = name === param.name || (name === 'NO_DATA' && !param.name) + const isCategoryMatch = category === param.category + // 全部匹配 + if (xAxis && xAxisExt && extStack) { + return isNameMatch && isGroupMatch && isCategoryMatch + } + // 只匹配到维度 + if (xAxis && !xAxisExt && !extStack) { + return isNameMatch + } else if (!xAxis && xAxisExt && !extStack) { + return isGroupMatch + } else if (!xAxis && !xAxisExt && extStack) { + return isCategoryMatch + } else if (xAxis && xAxisExt && !extStack) { + return isNameMatch && isGroupMatch + } else if (xAxis && !xAxisExt && extStack) { + return isNameMatch && isCategoryMatch + } else if (!xAxis && xAxisExt && extStack) { + return isGroupMatch && isCategoryMatch + } else { + return false + } } else { return ( - (state.linkageActiveParam.name === param.name || - (state.linkageActiveParam.name === 'NO_DATA' && !param.name)) && - state.linkageActiveParam.category === param.category + (name === param.name || (name === 'NO_DATA' && !param.name)) && category === param.category ) } } @@ -274,6 +350,8 @@ const renderG2Plot = async (chart, chartView: G2PlotChartView) => { g2Timer && clearTimeout(g2Timer) g2Timer = setTimeout(async () => { try { + // 在这里清理掉之前图表的空dom + configEmptyDataStyle([1], containerId) myChart?.destroy() myChart = await chartView.drawChart({ chartObj: myChart, @@ -295,7 +373,6 @@ const renderG2Plot = async (chart, chartView: G2PlotChartView) => { const dynamicAreaId = ref('') const country = ref('') -const appStore = useAppStoreWithOut() const chartContainer = ref(null) let scope let mapTimer: number @@ -332,8 +409,6 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView, callback) => { mapL7Timer && clearTimeout(mapL7Timer) mapL7Timer = setTimeout(async () => { @@ -343,25 +418,12 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView, callb chart: chart, action }) - - // 清除已有比例尺 - if (scaleControl) { - myChart.getScene()?.removeControl(scaleControl) - scaleControl = null - } - - // 创建并添加新比例尺 - scaleControl = new Scale({ - position: 'bottomleft', - imperial: false - }) - myChart.getScene()?.addControl(scaleControl) - myChart?.render() callback?.() emit('resetLoading') }, 500) } + const pointClickTrans = () => { if (embeddedCallBack.value === 'yes') { trackClick('pointClick') @@ -375,11 +437,8 @@ const actionDefault = param => { if (param.from === 'word-cloud') { emitter.emit('word-cloud-default-data-range', param) } - if (param.from === 'gauge') { - emitter.emit('gauge-default-data', param) - } - if (param.from === 'liquid') { - emitter.emit('liquid-default-data', param) + if (param.from === 'gauge' || param.from === 'liquid') { + emitter.emit('gauge-liquid-y-value', param) } } @@ -399,7 +458,8 @@ const action = param => { // 下钻 联动 跳转 state.linkageActiveParam = { category: state.pointParam.data.category ? state.pointParam.data.category : 'NO_DATA', - name: state.pointParam.data.name ? state.pointParam.data.name : 'NO_DATA' + name: state.pointParam.data.name ? state.pointParam.data.name : 'NO_DATA', + group: state.pointParam.data.group ? state.pointParam.data.group : 'NO_DATA' } if (trackMenu.value.length < 2) { // 只有一个事件直接调用 @@ -429,7 +489,7 @@ const action = param => { state.trackBarStyle.top = trackBarY + 'px' } - viewTrack.value.trackButtonClick() + viewTrack.value.trackButtonClick(view.value.id) } } @@ -438,10 +498,28 @@ const trackClick = trackAction => { if (!param?.data?.dimensionList) { return } - let checkName = state.pointParam.data.name - // 对多维度的处理 取第一个 - if (state.pointParam.data.dimensionList.length > 1) { - checkName = state.pointParam.data.dimensionList[0].id + let checkName = undefined + if (param.data.dimensionList.length > 1) { + // 分组堆叠处理 去能比较出来值的那个维度 + if (view.value.type === 'bar-group-stack') { + const length = param.data.dimensionList.length + // 存在最后一个id + if (param.data.dimensionList[length - 1].id === param.data.dimensionList[length - 2].id) { + param.data.dimensionList.pop() + } + param.data.dimensionList.forEach(dimension => { + if (dimension.value === param.data.category) { + checkName = dimension.id + } + }) + } + if (!checkName) { + // 对多维度的处理 取第一个 + checkName = param.data.dimensionList[0].id + } + } + if (!checkName) { + checkName = param.data.name } // 跳转字段处理 let jumpName = state.pointParam.data.name @@ -480,7 +558,7 @@ const trackClick = trackAction => { } } let quotaList = state.pointParam.data.quotaList - if (['bar-range'].includes(curView.type)) { + if (['bar-range', 'bullet-graph'].includes(curView.type)) { quotaList = state.pointParam.data.dimensionList } else { quotaList[0]['value'] = state.pointParam.data.value @@ -535,37 +613,38 @@ const trackMenu = computed(() => { let trackMenuInfo = [] // 复用、放大状态的仪表板不进行联动、跳转和下钻的动作 if (!['multiplexing', 'viewDialog'].includes(showPosition.value)) { + let drillFields = + curView?.drill && curView?.drillFilters?.length + ? curView.drillFilters.map(item => item.fieldId) + : [] let linkageCount = 0 let jumpCount = 0 if (curView?.type?.includes('chart-mix')) { - chartData.value?.left?.fields?.forEach(item => { - const sourceInfo = view.value.id + '#' + item.id - if (nowPanelTrackInfo.value[sourceInfo]) { - linkageCount++ - } - if (nowPanelJumpInfo.value[sourceInfo]) { - jumpCount++ - } - }) - chartData.value?.right?.fields?.forEach(item => { - const sourceInfo = view.value.id + '#' + item.id - if (nowPanelTrackInfo.value[sourceInfo]) { - linkageCount++ - } - if (nowPanelJumpInfo.value[sourceInfo]) { - jumpCount++ - } + Array.of('left', 'right').forEach(side => { + chartData.value?.[side]?.fields + ?.filter(item => !drillFields.includes(item.id)) + .forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } + }) }) } else { - chartData.value?.fields?.forEach(item => { - const sourceInfo = view.value.id + '#' + item.id - if (nowPanelTrackInfo.value[sourceInfo]) { - linkageCount++ - } - if (nowPanelJumpInfo.value[sourceInfo]) { - jumpCount++ - } - }) + chartData.value?.fields + ?.filter(item => !drillFields.includes(item.id)) + .forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } + }) } jumpCount && view.value?.jumpActive && @@ -615,7 +694,7 @@ const canvas2Picture = (pictureData, online) => { mapDom.appendChild(imgDom) } const preparePicture = id => { - if (id !== curView.id) { + if (id !== curView?.id) { return } const chartView = chartViewManager.getChartView(curView.render, curView.type) @@ -639,7 +718,7 @@ const preparePicture = id => { } } const unPreparePicture = id => { - if (id !== curView.id) { + if (id !== curView?.id) { return } const chartView = chartViewManager.getChartView(curView.render, curView.type) @@ -667,6 +746,7 @@ defineExpose({ trackMenu, clearLinkage }) +let intersectionObserver let resizeObserver const TOLERANCE = 0.01 const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map'] @@ -691,13 +771,32 @@ onMounted(() => { preSize[1] = size.blockSize }) resizeObserver.observe(containerDom) + intersectionObserver = new IntersectionObserver(([entry]) => { + if (RESIZE_MONITOR_CHARTS.includes(view.value.type)) { + return + } + if (entry.intersectionRatio <= 0) { + myChart?.emit('tooltip:hidden') + } + }) + intersectionObserver.observe(containerDom) useEmitt({ name: 'l7-prepare-picture', callback: preparePicture }) useEmitt({ name: 'l7-unprepare-picture', callback: unPreparePicture }) }) +const MAP_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map', 'symbolic-map'] +const onWheel = (e: WheelEvent) => { + if (!MAP_CHARTS.includes(view.value.type)) { + return + } + if (!props.active) { + e.stopPropagation() + } +} onBeforeUnmount(() => { try { myChart?.destroy() resizeObserver?.disconnect() + intersectionObserver?.disconnect() } catch (e) { console.warn(e) } @@ -715,7 +814,13 @@ onBeforeUnmount(() => { :style="state.trackBarStyle" @trackClick="trackClick" /> - +