简柏林 / thingskit-scada · Commits

Commit 7661c249c17dab6bd47be6b977d11d3d8fb4e5e2

Authored by xp.Huang
2 parents 5e021713 2da0504a

Merge branch 'ww' into 'main' 

feat: implement chart component

See merge request huang/thingskit-drawio!20
Inline Side-by-side
Showing 8 changed files with 381 additions and 118 deletions
No preview for this file type
No preview for this file type
@@ -3655,18 +3655,19 @@ @@ -3655,18 +3655,19 @@
3655 3655
3656 if (!this.isOffline() && file.title == '.scratchpad' && EditorUi.scratchpadHelpLink != null) 3656 if (!this.isOffline() && file.title == '.scratchpad' && EditorUi.scratchpadHelpLink != null)
3657 { 3657 {
3658 - var link = document.createElement('span');  
3659 - link.setAttribute('title', mxResources.get('help'));  
3660 - link.style.cssText = 'color:#a3a3a3;text-decoration:none;margin-right:2px;cursor:pointer;';  
3661 - mxUtils.write(link, '?');  
3662 -  
3663 - mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)  
3664 - {  
3665 - this.openLink(EditorUi.scratchpadHelpLink);  
3666 - mxEvent.consume(evt);  
3667 - }));  
3668 -  
3669 - buttons.insertBefore(link, buttons.firstChild); 3658 + // TODO thingsKit 隐藏 Sidebar 便笺本 ？
  3659 + // var link = document.createElement('span');
  3660 + // link.setAttribute('title', mxResources.get('help'));
  3661 + // link.style.cssText = 'color:#a3a3a3;text-decoration:none;margin-right:2px;cursor:pointer;';
  3662 + // mxUtils.write(link, '?');
  3663 + //
  3664 + // mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
  3665 + // {
  3666 + // this.openLink(EditorUi.scratchpadHelpLink);
  3667 + // mxEvent.consume(evt);
  3668 + // }));
  3669 + //
  3670 + // buttons.insertBefore(link, buttons.firstChild);
3670 } 3671 }
3671 } 3672 }
3672 3673
@@ -1109,7 +1109,7 @@ @@ -1109,7 +1109,7 @@
1109 // 阀门 1109 // 阀门
1110 this.addValvePalette(); 1110 this.addValvePalette();
1111 // 图表 1111 // 图表
1112 - // this.addChartsPalette(); 1112 + this.addChartsPalette();
1113 // 风机 1113 // 风机
1114 this.addFanPalette(); 1114 this.addFanPalette();
1115 // 污水处理 1115 // 污水处理
1 (function () { 1 (function () {
  2 +
2 // Adds Atlassian shapes 3 // Adds Atlassian shapes
3 // 图表 4 // 图表
4 Sidebar.prototype.addChartsPalette = function () { 5 Sidebar.prototype.addChartsPalette = function () {
  6 + const { enumConst, enumChartType, generatorCell, generatorChartsId } = this.chartsComponentExtend()
5 7
6 - const generatorId = () => `echarts__instance__${ Date.now() }`  
7 -  
8 - const addClickHandler = Sidebar.prototype.addClickHandler  
9 - Sidebar.prototype.addClickHandler = function (elt, ds, cells) {  
10 - var graph = this.editorUi.editor.graph;  
11 - var tol = graph.tolerance;  
12 - const cell = cells[0]  
13 - const cellValue = cell.value  
14 - const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'  
15 - const mouseDown = ds.mouseDown  
16 -  
17 - ds.mouseDown = function (evt) {  
18 - if (validate) {  
19 - cell.value.setAttribute('id', generatorId())  
20 - graph.setAttributeForCell(cell, 'label', `<div class="echarts__instance" id="${ generatorId() }">${ generatorId() }</div>`)  
21 - }  
22 - mouseDown.apply(this, arguments) 8 + const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
  9 + const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
  10 + const s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
  11 + const gn = 'mxgraph.charts';
  12 + const dt = 'charts ';
  13 + const sb = this;
  14 + this.setCurrentSearchEntryLibrary('charts');
  15 +
  16 + const fns = [
  17 + this.addEntry('line chart', mxUtils.bind(this, function () {
  18 + const id = generatorChartsId()
  19 + const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.LINE_CHART)
  20 + return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '折线图');
  21 + })),
  22 + this.addEntry('bar chart', mxUtils.bind(this, function () {
  23 + const id = generatorChartsId()
  24 + const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.BAR_CHART, '/thingskit-drawio/images/thingskit/bar-chart.png')
  25 + return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图');
  26 + })),
  27 + ];
  28 +
  29 + this.addPaletteFunctions('charts', '图表', false, fns);
  30 +
  31 + this.setCurrentSearchEntryLibrary();
  32 + };
  33 +
  34 + Sidebar.prototype.chartsInstanceMapping = new Map()
  35 +
  36 + /**
  37 + * @description 图表组件 拓展
  38 + * @returns {{generatorChartsId: (function(): string), createChartsNode: (function(*, *=, *=): string), chartsLineChartsConfig: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]}), generatorCell: (function(*, *, *): *), chartsComponentInit: chartsComponentInit}}
  39 + */
  40 + Sidebar.prototype.chartsComponentExtend = function () {
  41 + const enumConst = {
  42 +
  43 + /**
  44 + * @description 图表cell 默认宽度
  45 + */
  46 + CHART_CELL_DEFAULT_WIDTH: 400,
  47 +
  48 + /**
  49 + * @description 图表cell 默认高度
  50 + */
  51 + CHART_CELL_DEFAULT_HEIGHT: 400,
  52 +
  53 + /**
  54 + * @description 图表cell的 width attribute
  55 + */
  56 + CHART_CELL_WIDTH: 'width',
  57 +
  58 + /**
  59 + * @description 图表cell的 height attribute
  60 + */
  61 + CHART_CELL_HEIGHT: 'height',
  62 +
  63 + /**
  64 + * @description cell 类型是否为 charts
  65 + */
  66 + CHART_COMP: 'charts',
  67 +
  68 + /**
  69 + * @description cell id key
  70 + */
  71 + CHART_CELL_ID: 'chartInstanceId',
  72 +
  73 + /**
  74 + * @description 组件类型 key
  75 + */
  76 + COMPONENTS_TYPE_KEY: 'componentsType',
  77 +
  78 + /**
  79 + * @description 图表容器 class name
  80 + */
  81 + CHART_CONTAINER_CLS: 'echarts__instance',
  82 +
  83 + /**
  84 + * @description 图表容器 id 前缀
  85 + */
  86 + CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',
  87 +
  88 + /**
  89 + * @description 图表图片占位符大小
  90 + */
  91 + CHART_IMG_PLACEHOLDER_SIZE: 30,
  92 +
  93 + /**
  94 + * @description 图表类型 key
  95 + */
  96 + CHART_TYPE_KEY: 'chartType',
  97 + }
  98 +
  99 + const enumChartType = {
  100 + LINE_CHART: 'lineChart',
  101 + BAR_CHART: 'barChart',
  102 + }
  103 +
  104 + const chartOptionMapping = {
  105 + [enumChartType.LINE_CHART]: chartsLineChartsConfig,
  106 + [enumChartType.BAR_CHART]: chartsBarChartConfig,
  107 + }
  108 +
  109 + const graph = this.graph
  110 +
  111 + chartsComponentInit()
  112 +
  113 + /**
  114 + * @description 创建cell
  115 + * @param id
  116 + * @param width
  117 + * @param height
  118 + * @param chartType
  119 + * @param placeholderPath
  120 + * @returns {*}
  121 + */
  122 + function generatorCell(id, width, height, chartType, placeholderPath) {
  123 + const cell = new mxCell(createChartsNode(id, width, height, placeholderPath), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
  124 + cell.setVertex(true)
  125 + graph.setAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY, 'charts');
  126 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
  127 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
  128 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
  129 + graph.setAttributeForCell(cell, enumConst.CHART_TYPE_KEY, chartType)
  130 + return cell
  131 + }
  132 +
  133 + /**
  134 + * @description 生成图表 id
  135 + * @returns {string}
  136 + */
  137 + function generatorChartsId() {
  138 + return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
  139 + }
  140 +
  141 + /**
  142 + * @description 创建图表节点
  143 + * @param id
  144 + * @param width
  145 + * @param height
  146 + * @param placeholderPath
  147 + * @returns {string}
  148 + */
  149 + function createChartsNode(id, width = 400, height = 400, placeholderPath = '/thingskit-drawio/images/thingskit/line-chart.png') {
  150 + return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ placeholderPath }" alt=""></div>`
  151 + }
  152 +
  153 + /**
  154 + * @description 折线图配置
  155 + * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], type: string}]}}
  156 + */
  157 + function chartsLineChartsConfig() {
  158 + return {
  159 + xAxis: {
  160 + type: 'category',
  161 + data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
  162 + },
  163 + yAxis: {
  164 + type: 'value',
  165 + },
  166 + series: [
  167 + {
  168 + data: [ 150, 230, 224, 218, 135, 147, 260 ],
  169 + type: 'line',
  170 + },
  171 + ],
  172 + }
  173 + }
  174 +
  175 + /**
  176 + * @description 柱状图
  177 + * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], showBackground: boolean, backgroundStyle: {color: string}, type: string}]}}
  178 + */
  179 + function chartsBarChartConfig() {
  180 + return {
  181 + xAxis: {
  182 + type: 'category',
  183 + data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
  184 + },
  185 + yAxis: {
  186 + type: 'value',
  187 + },
  188 + series: [
  189 + {
  190 + data: [ 120, 200, 150, 80, 70, 110, 130 ],
  191 + type: 'bar',
  192 + showBackground: true,
  193 + backgroundStyle: {
  194 + color: 'rgba(180, 180, 180, 0.2)',
  195 + },
  196 + },
  197 + ],
23 }; 198 };
  199 + }
24 200
25 - const mouseUp = ds.mouseUp  
26 - ds.mouseUp = function () {  
27 - try {  
28 - mouseUp.apply(this, arguments)  
29 - } finally { 201 + /**
  202 + * @description 图表组件 拓展处理
  203 + */
  204 + function chartsComponentInit() {
  205 + const chartsInstanceMapping = Sidebar.prototype.chartsInstanceMapping
  206 +
  207 + /**
  208 + * @description 拓展添加charts 实例方法
  209 + */
  210 + const addClickHandler = Sidebar.prototype.addClickHandler
  211 + Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
  212 + const cell = cells[0]
  213 + const cellValue = cell.value
  214 + const validate = cellValue && cellValue.nodeName === 'UserObject' && isChartCell(cell)
  215 +
  216 + /**
  217 + * @description 拓展Sidebar鼠标按下
  218 + * @type {ds.mouseDown}
  219 + */
  220 + const mouseDown = ds.mouseDown
  221 + ds.mouseDown = function (evt) {
30 if (validate) { 222 if (validate) {
31 - const id = cell.value.id  
32 - const chartDom = document.getElementById(id);  
33 - chartDom.style.width = '400px'  
34 - chartDom.style.height = '400px'  
35 - const myChart = echarts.init(chartDom);  
36 - const option = {  
37 - xAxis: {  
38 - type: 'category',  
39 - data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],  
40 - },  
41 - yAxis: {  
42 - type: 'value',  
43 - },  
44 - series: [  
45 - {  
46 - data: [ 150, 230, 224, 218, 135, 147, 260 ],  
47 - type: 'line',  
48 - },  
49 - ],  
50 - };  
51 -  
52 - option && myChart.setOption(option); 223 + const id = generatorChartsId()
  224 + const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
  225 + cell.setGeometry(geo)
  226 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
  227 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
  228 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
  229 + graph.setAttributeForCell(cell, 'label', createChartsNode(id))
  230 + }
  231 + mouseDown.apply(this, arguments)
  232 + };
  233 +
  234 + /**
  235 + * @description 拓展放置图表
  236 + * @type {ds.mouseUp}
  237 + */
  238 + const mouseUp = ds.mouseUp
  239 + ds.mouseUp = function () {
  240 + try {
  241 + mouseUp.apply(this, arguments)
  242 + } finally {
  243 + if (validate) {
  244 + const id = getCellId(cell)
  245 + const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)
  246 + const chartDom = document.getElementById(id);
  247 + const myChart = echarts.init(chartDom);
  248 + const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
  249 + option && myChart.setOption(option);
  250 + chartsInstanceMapping.set(id, myChart)
  251 + }
53 } 252 }
54 } 253 }
55 - // const dom = document.getElementById() 254 + addClickHandler.apply(this, arguments)
56 } 255 }
57 - addClickHandler.apply(this, arguments)  
58 - }  
59 256
60 - const convertValueToString = this.graph.convertValueToString  
61 - this.graph.convertValueToString = function (cell) {  
62 - const cellValue = cell.value  
63 - const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'  
64 - if (validate) {  
65 - setTimeout(() => {  
66 - const id = cell.value.id  
67 - console.log(id)  
68 - const chartDom = document.getElementById(id);  
69 - chartDom.style.width = '400px'  
70 - chartDom.style.height = '400px'  
71 - const myChart = echarts.init(chartDom);  
72 - const option = {  
73 - xAxis: {  
74 - type: 'category',  
75 - data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],  
76 - },  
77 - yAxis: {  
78 - type: 'value',  
79 - },  
80 - series: [  
81 - {  
82 - data: [ 150, 230, 224, 218, 135, 147, 260 ],  
83 - type: 'line',  
84 - },  
85 - ],  
86 - };  
87 -  
88 - option && myChart.setOption(option);  
89 - }) 257 + /**
  258 + * @description charts cell发生resize时改变charts size
  259 + * @type {Function}
  260 + */
  261 + const cellResized = mxGraph.prototype.cellResized
  262 + mxGraph.prototype.cellResized = function (cell, rect) {
  263 + const { width, height } = rect
  264 + const id = getCellId(cell)
  265 + const chartDom = document.getElementById(id)
  266 + chartDom.style.width = `${ width }px`
  267 + chartDom.style.height = `${ height }px`
  268 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
  269 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
  270 + const instance = chartsInstanceMapping.get(id)
  271 + instance.resize()
  272 + cellResized.apply(this, arguments)
90 } 273 }
91 274
92 - return convertValueToString.apply(this, arguments)  
93 - } 275 + /**
  276 + * @description 删除charts cell 时 删除保存的charts 实例
  277 + */
  278 + const deleteCells = Graph.prototype.deleteCells
  279 + Graph.prototype.deleteCells = function (cell) {
  280 + const id = getCellId(cell)
  281 + chartsInstanceMapping.delete(id)
  282 + return deleteCells.apply(this, arguments)
  283 + }
94 284
95 - var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';  
96 - var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';  
97 - var s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";  
98 - var gn = 'mxgraph.charts';  
99 - var dt = 'charts ';  
100 - var sb = this;  
101 - this.setCurrentSearchEntryLibrary('charts'); 285 + /**
  286 + * @description 获取charts cell 的id
  287 + * @param cell
  288 + * @returns {*}
  289 + */
  290 + function getCellId(cell) {
  291 + return graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
  292 + }
102 293
103 - const now = Date.now  
104 - var fns = [  
105 - this.addEntry('charts', mxUtils.bind(this, function () {  
106 - const id = generatorId()  
107 - var cell = new mxCell(`<div id="${ id }" class="echarts__instance"></div>`, new mxGeometry(0, 0, 400, 400), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');  
108 - cell.setVertex(true)  
109 - this.graph.setAttributeForCell(cell, 'placeholders', '1');  
110 - this.graph.setAttributeForCell(cell, 'componentsType', 'charts');  
111 - cell.value.setAttribute('id', id)  
112 - return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'charts');  
113 - })),  
114 - ]; 294 + /**
  295 + * @description 创建图表实例 并 保存实例到map中
  296 + * @param id
  297 + * @param width
  298 + * @param height
  299 + * @param chartType
  300 + */
  301 + function generatorEChartInstance(id, width, height, chartType) {
  302 + const chartDom = document.getElementById(id);
  303 + chartDom.style.width = `${ width }px`
  304 + chartDom.style.height = `${ height }px`
  305 + const myChart = echarts.init(chartDom);
  306 + const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
  307 + option && myChart.setOption(option);
  308 + chartsInstanceMapping.set(id, myChart)
  309 + }
115 310
116 - this.addPaletteFunctions('charts', '图表', false, fns); 311 + /**
  312 + * @description 初始化图表
  313 + */
  314 + const openFileHandle = EditorUi.prototype.openFileHandle
  315 + EditorUi.prototype.openFileHandle = function () {
  316 + try {
  317 + openFileHandle.apply(this, arguments)
  318 + } finally {
  319 + const allCell = this.editor.graph.getDefaultParent().children
  320 + const domIdMapping = new Map()
  321 + for (const cell of allCell) {
  322 + const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
  323 + if (isChartCell(cell) && chartInstanceId) {
  324 + const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
  325 + const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
  326 + const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)
  327 + domIdMapping.set(chartInstanceId, { width, height, chartType })
  328 + }
  329 + }
  330 + const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
  331 + for (const chartDom of chartsDomList) {
  332 + const id = chartDom.getAttribute('id')
  333 + const { width, height, chartType } = domIdMapping.get(id)
  334 + console.log(chartType)
  335 + generatorEChartInstance(id, width, height, chartType)
  336 + }
  337 + }
  338 + }
117 339
118 - this.setCurrentSearchEntryLibrary();  
119 - };  
120 -})(); 340 + /**
  341 + * @description 是否是图表cell
  342 + * @param cell
  343 + * @returns {boolean}
  344 + */
  345 + function isChartCell(cell) {
  346 + const componentsType = graph.getAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY)
  347 + return !!(componentsType && componentsType === enumConst.CHART_COMP)
  348 + }
121 349
122 -function testChartImg() {  
123 - return 'data:image/png;base64,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'  
124 -}  
  350 + /**
  351 + * @description 拓展Sidebar 提示框
  352 + */
  353 + const createTooltip = Sidebar.prototype.createTooltip
  354 + Sidebar.prototype.createTooltip = function (elt, cells) {
  355 + const id = generatorChartsId()
  356 + const validateFlag = isChartCell(cells[0])
  357 + const chartType = graph.getAttributeForCell(cells[0], enumConst.CHART_TYPE_KEY)
  358 + try {
  359 + if (validateFlag) {
  360 + const cell = generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
  361 + const _arguments = Array.prototype.slice.call(arguments, 0)
  362 + _arguments.splice(1, 1, [ cell ])
  363 + createTooltip.apply(this, _arguments)
  364 + } else {
  365 + createTooltip.apply(this, arguments)
  366 + }
  367 + } finally {
  368 + if (validateFlag) generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
  369 + }
  370 + }
  371 + }
  372 +
  373 + return {
  374 + generatorCell,
  375 + generatorChartsId,
  376 + createChartsNode,
  377 + chartsComponentInit,
  378 + chartsLineChartsConfig,
  379 + enumConst,
  380 + enumChartType,
  381 + }
  382 + }
  383 +
  384 +})();
@@ -4879,6 +4879,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -4879,6 +4879,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4879 const ss = ui.getSelectionState(); 4879 const ss = ui.getSelectionState();
4880 const vertices = ss.vertices || [] 4880 const vertices = ss.vertices || []
4881 4881
  4882 + console.log(Sidebar.prototype)
  4883 + console.log(Sidebar.prototype.chartsInstanceMapping)
4882 // console.log(this.editorUi) 4884 // console.log(this.editorUi)
4883 console.log(vertices) 4885 console.log(vertices)
4884 4886