Editing visual using pbiviz

[arij66]

Hi,

I am new to developing visual (or development of any sort) so any help here would be greatly appreciated.

I am hoping to customise this visual for my needs as it does almost everything I want it to do but doesn't allow a few small things;

1. The 'Category' text to wrap if too long. Currently it just adds ... if text is too long.
2. Change of Font - as far as I can see the Category font can not be changed
3. Remove the forced chiclet background colour - currently it allows me to choose different colours but no option to make the background completely transparent.

So the intention is to use this visual and add the above capabilities.

I have set up with all the tools as per the latest guides online however when I try to debug this visual using pbiviz start function, I get various errors

PS C:\users\admin.as\chiclet> pbiviz start warn For better development experience, we strongly recommend converting the visual to es2015 modu warn https://microsoft.github.io/PowerBI-visuals/docs/latest/how-to-guide/migrating-to-powerbi-vis error Could not find sourceFile: '.api/v1.13.0/PowerBI-visuals.d.ts' in ["C:/Users/admin.as/AppData odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.d.ts","C:/Users/admin.as/AppData/Roaming owerbi-visuals-tools/node_modules/typescript/lib/lib.es5.d.ts","C:/Users/admin.as/AppData/Roaming/npm bi-visuals-tools/node_modules/typescript/lib/lib.dom.d.ts","C:/Users/admin.as/AppData/Roaming/npm/nod isuals-tools/node_modules/typescript/lib/lib.webworker.importscripts.d.ts","C:/Users/admin.as/AppData odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.scripthost.d.ts","src/chicletSlicerProps .ts","src/interfaces.ts","src/tableView.ts","src/webBehavior.ts","src/chicletSlicer.ts","C:/users/adm precompile/visualPlugin.ts"]. error undefined error ENOENT: no such file or directory, open 'C:\users\admin.as\chiclet.tmp\build\visual.js.map'

I then used to pbiviz update function after which pbiviz gave me the following errors

PS C:\users\admin.as\chiclet> pbiviz start warn For better development experience, we strongly recommend converting the visual to es2015 modu warn https://microsoft.github.io/PowerBI-visuals/docs/latest/how-to-guide/migrating-to-powerbi-vis error Could not find sourceFile: '.api/v1.13.0/PowerBI-visuals.d.ts' in ["C:/Users/admin.as/AppData odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.d.ts","C:/Users/admin.as/AppData/Roaming owerbi-visuals-tools/node_modules/typescript/lib/lib.es5.d.ts","C:/Users/admin.as/AppData/Roaming/npm bi-visuals-tools/node_modules/typescript/lib/lib.dom.d.ts","C:/Users/admin.as/AppData/Roaming/npm/nod isuals-tools/node_modules/typescript/lib/lib.webworker.importscripts.d.ts","C:/Users/admin.as/AppData odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.scripthost.d.ts","src/chicletSlicerProps .ts","src/interfaces.ts","src/tableView.ts","src/webBehavior.ts","src/chicletSlicer.ts","C:/users/adm precompile/visualPlugin.ts"]. error undefined error ENOENT: no such file or directory, open 'C:\users\admin.as\chiclet.tmp\build\visual.js.map'

I then tried the following - npm install jquery -p

After which, pbiviz start did "work" however now I am at the point where the visual is blank.

Please would someone able to advise how best to achieve what I am looking to do?

Many thanks

[pwazny1]

I had the same issue when I was trying to edit this control. I used this fork: https://github.com/helen508light/PowerBI-visuals-ChicletSlicer/tree/webpack_and_new_powerbiClients - from helen508light It looks that old libraries not working each other.

Unfortunately at this moment I have another issue. There is no reaction on mouserover, click or changing data in the slicer.

[helen508light]

Please, do not use this fork https://github.com/helen508light/PowerBI-visuals-ChicletSlicer/tree/webpack_and_new_powerbiClients It's still in progress

[helen508light]

@arij66 for this visual use npm i and then "npm run start" command, because it uses old API and "pbiviz start" will call new API

[helen508light]

@arij66 3. What about to make it white with maximum transparency?

2. Font can be adjusted by re-writing capabilities, settings and it's behaviour in visual.ts: see PowerKPI Martrix CurrentValue-FontFamily formatting option usage in the code https://github.com/microsoft/powerbi-visuals-powerkpimatrix

1. This behaviour for long text can be achieved in that way: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ or similar behavior produced by gantt custom visual for Resource Labels https://github.com/microsoft/powerbi-visuals-gantt/blob/master/src/gantt.ts#L2624-L2659

[pinan3hotmailcom]

since I run for this visual use npm i and then "npm run start" command

the error occurs: npm : error LESS style/chicletSlicer.less : The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined At line:1 char:1

• npm run start

• 
  + CategoryInfo          : NotSpecified: ( error  LESS  s...eived undefined:String) [], RemoteException
  + FullyQualifiedErrorId : NativeCommandError