Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #8009 & #5969, symbol symbolSize and opacity setting for category itemStyle in graph #9171

Merged
merged 13 commits into from
Nov 4, 2018
Merged

fix #8009 & #5969, symbol symbolSize and opacity setting for category itemStyle in graph #9171

Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c309055
fix categoryVisual symbol symbolSize opacity
Vvvickie Oct 8, 2018
4a8e61c
fix symbolKeepAspect symbolRotate symbolOffset
Vvvickie Oct 10, 2018
fa319d2
delete console
Vvvickie Oct 10, 2018
81e8caf
do symbolStyle Configs in a loop
Vvvickie Oct 11, 2018
104005c
format codeStyle
Vvvickie Oct 11, 2018
d011ec2
format codeStyle
Vvvickie Oct 11, 2018
360e0d5
reduct the latter symbolStyleList
Vvvickie Oct 11, 2018
8767981
use itemMode to get symbol
Vvvickie Oct 30, 2018
0e390af
review
Vvvickie Oct 31, 2018
d801e18
add symbol
Vvvickie Nov 4, 2018
9dccfd0
add symbol
Vvvickie Nov 4, 2018
886d4c5
about symbol
Vvvickie Nov 4, 2018
2c2d8ef
add symbol
Vvvickie Nov 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions src/chart/graph/categoryVisual.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,24 @@ export default function (ecModel) {
var name = categoriesData.getName(idx);
// Add prefix to avoid conflict with Object.prototype.
categoryNameIdxMap['ec-' + name] = idx;

var itemModel = categoriesData.getItemModel(idx);

var color = itemModel.get('itemStyle.color')
|| seriesModel.getColorFromPalette(name, paletteScope);
categoriesData.setItemVisual(idx, 'color', color);

var opacity = itemModel.get('itemStyle.opacity') || 1;
Vvvickie marked this conversation as resolved.
Show resolved Hide resolved
categoriesData.setItemVisual(idx, 'opacity', opacity);

var symbolStyleList = ['symbol','symbolSize','symbolKeepAspect','symbolOffset','symbolRotate']
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please mention your code style. Space after , and ; at the end.


for(var i = 0;i < symbolStyleList.length;i++){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Space after ;, for, and ). Please also check other places.

var symbolStyleItem = itemModel.getShallow(symbolStyleList[i], true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you test graph-symbol.html? It seems itemModel.getShallow('symbolOffset', true) always return undefined, so that symbolOffset: ['30%', 0] is config is not used. This doesn't seem right.

Copy link
Contributor Author

@Vvvickie Vvvickie Oct 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both symbolOffset and other items return undefined, but somehow it works. I have checked that it can be consoled during the upper section.

for (var i = 0; i < symbolStyleList.length; i++) {
                var symbolStyleItem = itemModel.getShallow(symbolStyleList[i], true);
                if (symbolStyleItem != null) {
                    categoriesData.setItemVisual(idx, symbolStyleList[i], symbolStyleItem);
                }
            }

In my local server, changing the symbolOffset do bring some effects to the symbol. You could put the percentage larger to see that.
But I am not sure whether the position is right since it is not computed by my code...
Really really sorry for those mistakes I have made...
Here is a new version with formatted code.

Copy link
Contributor Author

@Vvvickie Vvvickie Oct 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduct the latter symbolStyleList with symbolOffset and symbolRotate, it also works. Others need both two functions to do that.
In fact I don't know why...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, we have to make sure we understand our changes. 🤣
I'll check it later. Thanks!

if (symbolStyleItem != null) {
Vvvickie marked this conversation as resolved.
Show resolved Hide resolved
categoriesData.setItemVisual(idx, symbolStyleList[i], symbolStyleItem);
}
}

});

// Assign category color to visual
Expand All @@ -47,14 +60,30 @@ export default function (ecModel) {
if (typeof category === 'string') {
category = categoryNameIdxMap['ec-' + category];
}
if (!data.getItemVisual(idx, 'color', true)) {
data.setItemVisual(
idx, 'color',
categoriesData.getItemVisual(category, 'color')
);

var itemStyleList = ['color','opacity'];

for(var i =0; i<itemStyleList.length;i++){
if (!data.getItemVisual(idx, itemStyleList[i], true)) {
Vvvickie marked this conversation as resolved.
Show resolved Hide resolved
data.setItemVisual(
idx, itemStyleList[i],
categoriesData.getItemVisual(category,itemStyleList[i])
);
}
}

var symbolStyleList = ['symbol','symbolSize','symbolKeepAspect','symbolOffset','symbolRotate']

for(var i =0; i<symbolStyleList.length;i++){
if (!data.getItemVisual(idx, symbolStyleList[i], true)) {
data.setItemVisual(
idx, symbolStyleList[i],
categoriesData.getItemVisual(category,symbolStyleList[i])
);
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After we have done all of this, there is another work need to do:

properties like color, opacity, symbolSize have been saved to data by data.setItemVisual,
but only color is retrieved from data (by data.getItemVisual(...)) and be used to render in GraphView.js.
We need to make opacity and symbolSize follow the same way, and then the entire patch can work.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ummm, I am confused about this. Where is color retrieved?
The opacity and symbolSize also work currently...What's wrong? O.O

Copy link
Member

@100pah 100pah Nov 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color, opacity, symbolSize are retrieved in src/chart/helper/Symbol.js (search 'getItemVisual' in this file). The src/chart/helper/Symbol.js, used by GraphView.js, is a common module abstracting the drawing and other behaviors of each node of the graph.

}
});
}
});
}
}