25:["$","title",null,{"children":"How to use Vega widget in Alpana | Mayuko Bonnefoy | Observable"}] 49:[{"id":"06fe34cc67ccc15ed9bc9df2d295286039aa03e96b9a5328746d91a42ba25a9f6109a5c23191a0dd1046915ca42661c5fa272dd0be11f12e7f68e8a72d2ca3fe","href":"https://static.observableusercontent.com/files/06fe34cc67ccc15ed9bc9df2d295286039aa03e96b9a5328746d91a42ba25a9f6109a5c23191a0dd1046915ca42661c5fa272dd0be11f12e7f68e8a72d2ca3fe","name":"1selectDatasource.png","type":"image/png","lastModified":1581588100791.513,"size":22552},{"id":"ab30c715df109a72fb4d2094b2d2083a652e2ea9cf992632270913e19b313779b172396f374eadb79ea5d0e59711240863ddb55e58f2171c526ee260b860bc7f","href":"https://static.observableusercontent.com/files/ab30c715df109a72fb4d2094b2d2083a652e2ea9cf992632270913e19b313779b172396f374eadb79ea5d0e59711240863ddb55e58f2171c526ee260b860bc7f","name":"2selectDatasource.png","type":"image/png","lastModified":1581588105140.724,"size":56768},{"id":"208305329aae8df06f2c1535628e369e377edf12e53efac60b30e47b7a825965cc7c986ae0a723fb7331b92cea9f5b03ec930f65a0602370d2f9d7ef5a3bec05","href":"https://static.observableusercontent.com/files/208305329aae8df06f2c1535628e369e377edf12e53efac60b30e47b7a825965cc7c986ae0a723fb7331b92cea9f5b03ec930f65a0602370d2f9d7ef5a3bec05","name":"1pencil.png","type":"image/png","lastModified":1581588750597.495,"size":4956},{"id":"2351091fb20938364d4ef7407c9c08575bf8100cfddce405001d3f7e609868a49f3b172e5a5994dbd49dbc00fd9993514fc9cd1749a6691eea140f32628d34d2","href":"https://static.observableusercontent.com/files/2351091fb20938364d4ef7407c9c08575bf8100cfddce405001d3f7e609868a49f3b172e5a5994dbd49dbc00fd9993514fc9cd1749a6691eea140f32628d34d2","name":"filter1.png","type":"image/png","lastModified":1581591170678.446,"size":55586},{"id":"a18324bc2b0420e2933010ae46818cac5017729dd1fbbe76f3b5e6a3d342308140ee6b6cd6a1ca92b8d8434f32754a2974485f08ce3a12a60671ef0fba85465d","href":"https://static.observableusercontent.com/files/a18324bc2b0420e2933010ae46818cac5017729dd1fbbe76f3b5e6a3d342308140ee6b6cd6a1ca92b8d8434f32754a2974485f08ce3a12a60671ef0fba85465d","name":"filter2.png","type":"image/png","lastModified":1581591174619.638,"size":23171},{"id":"671107485f1c884d28f0f7cc87a23806c880d7410ae825533abdf919e16986a170874c804ea8d020ee79504e7ac99e27171c0a1646d84974fef9dacbda525f5c","href":"https://static.observableusercontent.com/files/671107485f1c884d28f0f7cc87a23806c880d7410ae825533abdf919e16986a170874c804ea8d020ee79504e7ac99e27171c0a1646d84974fef9dacbda525f5c","name":"groupBy1.png","type":"image/png","lastModified":1581591181224.62,"size":16064},{"id":"1b0b791c4503a89a0463799fb5434db1be174794affb1368f04c2684be0873912a5ce4d8efbe4daa8e43d4e6cbd09fa071bd61bfcc5daa0e2890b75ef5303255","href":"https://static.observableusercontent.com/files/1b0b791c4503a89a0463799fb5434db1be174794affb1368f04c2684be0873912a5ce4d8efbe4daa8e43d4e6cbd09fa071bd61bfcc5daa0e2890b75ef5303255","name":"groupBy2.png","type":"image/png","lastModified":1581591186261.045,"size":63735},{"id":"54195212b436a86f964800f8bb3ee3ca18df3c2ed08042b9af56e37f4176803f9cc6e650e06d1b26f0a4b55c332724ec6a340489cf9249236962f3ce8767bae6","href":"https://static.observableusercontent.com/files/54195212b436a86f964800f8bb3ee3ca18df3c2ed08042b9af56e37f4176803f9cc6e650e06d1b26f0a4b55c332724ec6a340489cf9249236962f3ce8767bae6","name":"drildown.png","type":"image/png","lastModified":1581591195172.427,"size":8520},{"id":"6c5371344a31b6380e87b7df3ea4417e30a866c13bc3d48f6b8479fc46b6f64c2150393a94117b50e5457ef8b3492100121274d16394cf9f3a1933ae049e6a2b","href":"https://static.observableusercontent.com/files/6c5371344a31b6380e87b7df3ea4417e30a866c13bc3d48f6b8479fc46b6f64c2150393a94117b50e5457ef8b3492100121274d16394cf9f3a1933ae049e6a2b","name":"2drildown.png","type":"image/png","lastModified":1581592136262.801,"size":50437},{"id":"88f2fda872a3972f5d0edf2d654470e6d1caf812787b02984c079e609e29adb07501fd4496e0ee8b0973212847872b5a566c97027806386fe95d02d41c5355df","href":"https://static.observableusercontent.com/files/88f2fda872a3972f5d0edf2d654470e6d1caf812787b02984c079e609e29adb07501fd4496e0ee8b0973212847872b5a566c97027806386fe95d02d41c5355df","name":"3drildown.png","type":"image/png","lastModified":1581592139376.836,"size":57528}] 29:{"id":"1e2df5a0ab2ca608","slug":null,"title":"How to use Vega widget in Alpana","thumbnail":"f91c8f1320ba299893b69dc19c3ffdb44de50823c4f496df81911999fb63139b","access_level":"public","create_time":"$D2020-02-11T11:17:23.853Z","update_time":"$D2020-02-13T11:10:24.229Z","view_time":null,"first_public_time":"$D2023-11-09T17:02:13.649Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2047fce79563a72c","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":360,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9e62bd016a3332","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3b9e62bd016a3332","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to use Vega widget in Alpana","cells":[{"id":0,"value":"md`# How to use Vega widget in Alpana\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`Contents may change due to updates from Vega.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`\nThis tutorial talks about how to use Vega widget in a software called Alpana. \nThis time, I will explain using the gauge widget created in the [\"How to create a gauge with Vega\"](https://observablehq.com/d/e80f9b5bb52ccba9#step13).\nBefore getting into the main topic, let me first introduce Alpana.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n## What is Alpana?\nIt is Windows software that allows customers to create dashboards and view data. \nWith Alpana, you can connect different data sources and get a clear visualization via dashboards and widgets.\nMore details on site [code192.com](https://www.code192.com/alpana)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`\n## Responsive in Alpana\nWidgets do not automatically become responsive in the Alpana. \nIn other words, it must be set to be responsive within Vega. See step 1 of [the article](https://observablehq.com/d/e80f9b5bb52ccba9#step13) for more details.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`\n\n### Tutorial\n\n1. Config Alpana\n2. Datasource in Alpana\n3. Applying a theme in Alpana\n4. Functions of Alpana\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"step1 = md`---\n\n## Config Alpana\nVega's specification signals allow users to make selections and changes in Alpana. To do this, start with the Vega settings. Add a description to the property you want to operate in the Alpana. Then, write the following in it.\n\n\"{group: 'group name', displayName: 'signal name you want to display'}\"\n\nIf you create a group name and give the same name to multiple properties, the group name and properties are displayed together on the right side of the widget editing screen of Alpana. If the vega value is a string, the text type is displayed, and if it is a boolean, a check box type is displayed in Alpana.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"step2 = md`---\n\n## Datasource in Alpana\nIn order for Vega properties to be recognized in the Alpana, all available signals are displayed when you select the JSON file of the widget that you want to use. A list of available properties is displayed on the left side of the pop-up screen, and on the right side you can select to use the properties in Vega or use Datsource. If you select Datasource here, a field will be created in the Alpana.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"attachment = FileAttachment(\"1selectDatasource.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"image = FileAttachment(\"1selectDatasource.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`\nFor example, here we decide to use the main and target values as datasources. Then, Main Value which selected Datasoruce is displayed on the left side of the widget edit screen. Then, the combo box of the function is displayed on the left and the combo box of the Datasource to be used is displayed on the right. After entering these, the Target Value will be displayed below it, and you can select the combo box. As a result, two fields have been created: the main value and the target value. The field and the selected row in the Datasource are now bound.\n\nBy the way, you can't have more than one data source. This is because the Alpana itself makes one query at a time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"attachment2 = FileAttachment(\"2selectDatasource.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"image2 = FileAttachment(\"2selectDatasource.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"step3 = md`---\n\n## Applying a theme in Alpana\nClick the pencil near the top center of the Dashboard to select a theme.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"attachment3 = FileAttachment(\"1pencil.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"image3 = FileAttachment(\"1pencil.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`\nThey are Bootstrap, Material, Fabric and High Contrast. If you create a widget with Vega and display it on Alpana, some problems will occur depending on the theme. For example, if the title is displayed in black, the characters will not be visible in the high contrast theme. \n\nOn the arpana side, assign the existing color to a variable and set it as fill, stroke or font family. Specify the color for each class in the Vega widget file.\nWhat Vega needs to do is put the \"name\" property where you want the theme to apply. The SVG renderer adds a value of this name as the css class name surrounding the SVG group element containing the mark instance.\n\nYou can apply a theme with the \"Name\" property or \"from\": {\"data\": \"class name\"}. \n\nBy the way, in the gauge example, the theme is not applied to the color of the needle. That's because the theme is overwritten with the action of changing the color of the needle to notify the abnormality and it will not work as designed by Vega.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"step4 = md`---\n\n## Functions of Alpana\n### Filter\nSuppose you have a pie chart on your dashboard that shows which clerks sold and by how much products by country. Add a combo box there and select a clerk name.\nWhen you select a clerk's name, the pie chart shows for each country how much the clerk sold. This is the filter function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"attachment4 = FileAttachment(\"filter1.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"image4 = FileAttachment(\"filter1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"attachment5 = FileAttachment(\"filter2.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"image5 = FileAttachment(\"filter2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`\n### Group by\nFor example, you want to display data for each city. In that case, if you enter the main value on the left side of the widget edit screen, the category called group by will be displayed below it. If you select a city in the combo box next to Value, the gauges will be displayed for each city and the title will show the name of each city. In this case, it is necessary to write {{: Row}} in the title part on the right side of the widget edit screen.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"attachment6 = FileAttachment(\"groupBy1.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"image6 = FileAttachment(\"groupBy1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"attachment7 = FileAttachment(\"groupBy2.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"image7 = FileAttachment(\"groupBy2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`\n### Drill down\nThis function can be used in Group by. For example, if you selected the clerk name in group by, you can add more country names. Then, when you click on a clerk's name, you will also see how many products the clerk sold in each country.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"attachment8 = FileAttachment(\"drildown.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"image8 = FileAttachment(\"drildown.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"attachment9 = FileAttachment(\"2drildown.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"image9 = FileAttachment(\"2drildown.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"attachment10 = FileAttachment(\"3drildown.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"image10 = FileAttachment(\"3drildown.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null