Skilltree

[andrico1234]

Skilltree

[andrico1234]

Hey!

I'm loving this use case for BST!

I'll look into the issues you're having and see if I can/should update the package for them.

FYI, we expose the completed skills data from the SkillTreeGroup components. Is that what you need? You can find the API details here: https://github.com/andrico1234/beautiful-skill-tree#skillgroupdatatype

You'll need to write something like this:

<SkillProvider>
  <SkillTreeGroup>
    {({ skillCount,  selectedSkillCount }: SkillGroupDataType) => (
      <React.Fragment>
      <ProgressChart skillCount={} selectedSkillCount={}>
      <SkillTree
        treeId="first-tree"
        title="Skill Tree"
        data={data}
        collapsible
        description="My first skill tree"
      />
      </React.Fragment>
    )}
  </SkillTreeGroup>
</SkillProvider>;

Let me get this right:

• Add a classname to the node-title (I use styled components which hashes classnames, but I'll see what I can do)
• Fix the broken edges on larger screen sizes.
• Tree subtitle font should be same as heading font
• Heading font and colour values are incorrect

[handihow]

Hi Andrico Thanks for the reply! Indeed the total skill count and completed skill count are available in the skill tree group. However, when it is time to save the skill tree progress, so when you set a skill to completer, that is also the time for me to save the overall progress so that I can display progress bars for all my students on an overview page. So it would be nice if those numbers are available in the save method. Right now I cannot directly get them in the save method. You have summarised the other issues correctly. The styling of header in the node was easily achieved by finding the css class surrounding it.. I believe tippy-top or something like that. But as I said, this was a bit hard to figure out and from the start my headings were always unstyled. Cheers Roeland Op di 18 feb. 2020 10:01 schreef Andrico <[email protected]>:

…

Hey! I'm loving this use case for BST! I'll look into the issues you're having and see if I can/should update the package for them. FYI, we expose the completed skills data from the SkillTreeGroup components. Is that what you need? You can find the API details here: https://github.com/andrico1234/beautiful-skill-tree#skillgroupdatatype You'll need to write something like this: <SkillProvider> <SkillTreeGroup> {({ skillCount, selectedSkillCount }: SkillGroupDataType) => ( <React.Fragment> <ProgressChart skillCount={} selectedSkillCount={}> <SkillTree treeId="first-tree" title="Skill Tree" data={data} collapsible description="My first skill tree" /> </React.Fragment> )} </SkillTreeGroup> </SkillProvider>; Let me get this right: - Add a classname to the node-title (I use styled components which hashes classnames, but I'll see what I can do) - Fix the broken edges on larger screen sizes. - Tree subtitle font should be same as heading font - Heading font and colour values are incorrect — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=ALBCJSHOJXW3TKDOTUUAHV3RDOPVJA5CNFSM4KWCCR22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMBEIKI#issuecomment-587351081>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBCJSD5AVQROIJJEDHTDLLRDOPVJANCNFSM4KWCCR2Q> .

[andrico1234]

I'm going to split this ticket up into several small tickets

[andrico1234]

I'm going to close this ticket.

And instead reference this ticket in the other issues.

Here are links to the 4 issues I've created from this one.

#62
#63
#64
#65

As for creating custom classes. I want to mull over that a little bit.